Use new compound tooltip

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

View file

@ -20,7 +20,7 @@ import ReactDOM from "react-dom";
import classNames from "classnames";
import { defer, sleep } from "matrix-js-sdk/src/utils";
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 AsyncWrapper from "./AsyncWrapper";
@ -374,18 +374,16 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
const classes = classNames("mx_Dialog_wrapper mx_Dialog_staticWrapper", this.staticModal.className);
const staticDialog = (
<TooltipProvider>
<div className={classes}>
<Glass className="mx_Dialog_border">
<div className="mx_Dialog">{this.staticModal.elem}</div>
</Glass>
<div
data-testid="dialog-background"
className="mx_Dialog_background mx_Dialog_staticBackground"
onClick={this.onBackgroundClick}
/>
</div>
</TooltipProvider>
<div className={classes}>
<Glass className="mx_Dialog_border">
<div className="mx_Dialog">{this.staticModal.elem}</div>
</Glass>
<div
data-testid="dialog-background"
className="mx_Dialog_background mx_Dialog_staticBackground"
onClick={this.onBackgroundClick}
/>
</div>
);
ReactDOM.render(staticDialog, ModalManager.getOrCreateStaticContainer());
@ -401,18 +399,16 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
});
const dialog = (
<TooltipProvider>
<div className={classes}>
<Glass className="mx_Dialog_border">
<div className="mx_Dialog">{modal.elem}</div>
</Glass>
<div
data-testid="dialog-background"
className="mx_Dialog_background"
onClick={this.onBackgroundClick}
/>
</div>
</TooltipProvider>
<div className={classes}>
<Glass className="mx_Dialog_border">
<div className="mx_Dialog">{modal.elem}</div>
</Glass>
<div
data-testid="dialog-background"
className="mx_Dialog_background"
onClick={this.onBackgroundClick}
/>
</div>
);
setImmediate(() => ReactDOM.render(dialog, ModalManager.getOrCreateContainer()));

View file

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

View file

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

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")} />
<div className="mx_AuthBody_did-not-receive">
<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}>
<RetryIcon className="mx_Icon mx_Icon_16" />
{_t("action|resend")}

View file

@ -65,7 +65,7 @@ export const VerifyEmailModal: React.FC<Props> = ({
<div className="mx_AuthBody_did-not-receive">
<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}>
<RetryIcon className="mx_Icon mx_Icon_16" />
{_t("action|resend")}

View file

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

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
return (
<Tooltip label={tooltip || title} side="right">
<Tooltip label={tooltip || title} placement="right">
<div className={classNames("mx_InfoTooltip", className)} tabIndex={this.props.tabIndex ?? 0}>
<span className={classNames("mx_InfoTooltip_icon", iconClassName)} aria-label={title} />
{children}

View file

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

View file

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

View file

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

View file

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

View file

@ -17,7 +17,6 @@ limitations under the License.
import React, { createRef, SyntheticEvent, MouseEvent } from "react";
import ReactDOM from "react-dom";
import { MsgType } from "matrix-js-sdk/src/matrix";
import { TooltipProvider } from "@vector-im/compound-web";
import * as HtmlUtils from "../../../HtmlUtils";
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;
node.removeAttribute("data-mx-spoiler"); // we don't want to recurse
const spoiler = (
<TooltipProvider>
<Spoiler reason={reason} contentHtml={node.outerHTML} />
</TooltipProvider>
);
const spoiler = <Spoiler reason={reason} contentHtml={node.outerHTML} />;
ReactDOM.render(spoiler, spoilerContainer);
node.parentNode?.replaceChild(spoilerContainer, node);

View file

@ -36,7 +36,7 @@ export const PollListItem: React.FC<Props> = ({ event, onClick }) => {
const formattedDate = formatLocalDateShort(event.getTs());
return (
<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">
<span>{formattedDate}</span>
<PollIcon className="mx_PollListItem_icon" />

View file

@ -99,7 +99,7 @@ export const PollListItemEnded: React.FC<Props> = ({ event, poll, onClick }) =>
return (
<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_title">
<PollIcon className="mx_PollListItemEnded_icon" />

View file

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

View file

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

View file

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

View file

@ -784,7 +784,7 @@ export default class RoomHeader extends React.Component<IProps, IState> {
const icon = this.props.viewingCall ? (
<div className="mx_LegacyRoomHeader_icon mx_LegacyRoomHeader_icon_video" />
) : 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
// yet been loaded, insert a blank div to reserve space
this.client.isRoomEncrypted(this.props.room.roomId) && this.client.isCryptoEnabled() ? (

View file

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

View file

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

View file

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

View file

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

View file

@ -20,7 +20,7 @@ import { MatrixEvent } from "matrix-js-sdk/src/matrix";
import { MatrixRTCSessionManagerEvents } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSessionManager";
// eslint-disable-next-line no-restricted-imports
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 { _t } from "../languageHandler";
@ -168,7 +168,7 @@ export function IncomingCallToast({ notifyEvent }: Props): JSX.Element {
);
return (
<TooltipProvider>
<>
<div>
<RoomAvatar room={room ?? undefined} size="24px" />
</div>
@ -200,6 +200,6 @@ export function IncomingCallToast({ notifyEvent }: Props): JSX.Element {
onClick={onCloseClick}
title={_t("action|close")}
/>
</TooltipProvider>
</>
);
}

View file

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

View file

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

View file

@ -16,7 +16,6 @@ limitations under the License.
import React from "react";
import ReactDOM from "react-dom";
import { TooltipProvider } from "@vector-im/compound-web";
import PlatformPeg from "../PlatformPeg";
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
// without the superfluous span but this is not something React trivially supports at this time.
const tooltip = (
<TooltipProvider>
<LinkWithTooltip tooltip={href}>
<span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
</LinkWithTooltip>
</TooltipProvider>
<LinkWithTooltip tooltip={href}>
<span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
</LinkWithTooltip>
);
ReactDOM.render(tooltip, node);

View file

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

View file

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

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

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 { KnownMembership } from "matrix-js-sdk/src/types";
import { RoomHierarchy } from "matrix-js-sdk/src/room-hierarchy";
import { TooltipProvider } from "@vector-im/compound-web";
import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
import { mkStubRoom, stubClient } from "../../test-utils";
@ -287,9 +286,7 @@ describe("SpaceHierarchy", () => {
};
const getComponent = (props = {}): React.ReactElement => (
<MatrixClientContext.Provider value={client}>
<TooltipProvider>
<SpaceHierarchy {...defaultProps} {...props} />
</TooltipProvider>
<SpaceHierarchy {...defaultProps} {...props} />
</MatrixClientContext.Provider>
);

View file

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

View file

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

View file

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

View file

@ -17,7 +17,6 @@ limitations under the License.
import React from "react";
import { act, fireEvent, render } from "@testing-library/react";
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 MatrixClientContext from "../../../../src/contexts/MatrixClientContext";
@ -76,7 +75,6 @@ describe("<BeaconListItem />", () => {
<MatrixClientContext.Provider value={mockClient}>
<BeaconListItem {...defaultProps} {...props} />
</MatrixClientContext.Provider>,
{ wrapper: TooltipProvider },
);
const setupRoomWithBeacons = (beaconInfoEvents: MatrixEvent[], locationEvents?: MatrixEvent[]): Beacon[] => {

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -103,7 +103,7 @@ describe("CallEvent", () => {
});
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", () => {

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

View file

@ -31,7 +31,7 @@ describe("MessageTimestamp", () => {
const DAY_MS = HOUR_MS * 24;
it("should render HH:MM", () => {
const { asFragment } = render(<MessageTimestamp ts={nowDate.getTime()} />, { wrapper: TooltipProvider });
const { asFragment } = render(<MessageTimestamp ts={nowDate.getTime()} />, );
expect(asFragment()).toMatchInlineSnapshot(`
<DocumentFragment>
<span
@ -47,7 +47,7 @@ describe("MessageTimestamp", () => {
});
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")!);
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 () => {
const { container } = render(
<MessageTimestamp ts={nowDate.getTime()} receivedTs={nowDate.getTime() + DAY_MS} />,
{ wrapper: TooltipProvider },
,
);
await userEvent.hover(container.querySelector(".mx_MessageTimestamp")!);
expect((await screen.findByRole("tooltip")).textContent).toMatchInlineSnapshot(

View file

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

View file

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

View file

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

View file

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

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 { mocked } from "jest-mock";
import userEvent from "@testing-library/user-event";
import { TooltipProvider } from "@vector-im/compound-web";
import * as TestUtils from "../../../test-utils";
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", () => {
const { container } = render(<MemberTile member={member} />, { wrapper: TooltipProvider });
const { container } = render(<MemberTile member={member} />);
expect(container).toMatchSnapshot();
});
@ -48,7 +47,7 @@ describe("MemberTile", () => {
wasCrossSigningVerified: jest.fn().mockReturnValue(true),
} as unknown as UserVerificationStatus);
const { container } = render(<MemberTile member={member} />, { wrapper: TooltipProvider });
const { container } = render(<MemberTile member={member} />);
expect(container).toMatchSnapshot();
await waitFor(async () => {
@ -72,7 +71,7 @@ describe("MemberTile", () => {
crossSigningVerified: true,
} as DeviceVerificationStatus);
const { container } = render(<MemberTile member={member} />, { wrapper: TooltipProvider });
const { container } = render(<MemberTile member={member} />);
expect(container).toMatchSnapshot();
await waitFor(async () => {

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 { act, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { TooltipProvider } from "@vector-im/compound-web";
import {
clearAllModals,
@ -514,7 +513,6 @@ function wrapAndRender(
<MessageComposer {...defaultProps} {...props} />
</RoomContext.Provider>
</MatrixClientContext.Provider>,
{ wrapper: TooltipProvider },
),
roomContext,
};

View file

@ -20,7 +20,6 @@ import React, { ComponentProps } from "react";
import { getByText, render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
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 { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
@ -49,7 +48,6 @@ describe("ThreadsActivityCentre", () => {
<MatrixClientContext.Provider value={cli}>
<ThreadsActivityCentre {...props} />
</MatrixClientContext.Provider>,
{ wrapper: TooltipProvider },
);
};
@ -251,7 +249,6 @@ describe("ThreadsActivityCentre", () => {
<ThreadsActivityCentre />
</MatrixClientContext.Provider>
</div>,
{ wrapper: TooltipProvider },
);
await userEvent.click(getTACButton());