Skip to content
This repository has been archived by the owner on Oct 22, 2024. It is now read-only.

Commit

Permalink
Add back <TooltipProvider> everywhere
Browse files Browse the repository at this point in the history
  • Loading branch information
@MidhunSureshR
MidhunSureshR committed Sep 23, 2024
1 parent 87a3c0e commit 80940d0
Show file tree
Hide file tree
Showing 49 changed files with 328 additions and 162 deletions.
46 changes: 25 additions & 21 deletions src/Modal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import ReactDOM from "react-dom";
import classNames from "classnames";
import { IDeferred, defer, sleep } from "matrix-js-sdk/src/utils";
import { TypedEventEmitter } from "matrix-js-sdk/src/matrix";
import { Glass } from "@vector-im/compound-web";
import { Glass, TooltipProvider } from "@vector-im/compound-web";

import dis, { defaultDispatcher } from "./dispatcher/dispatcher";
import AsyncWrapper from "./AsyncWrapper";
Expand Down Expand Up @@ -416,16 +416,18 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
const classes = classNames("mx_Dialog_wrapper mx_Dialog_staticWrapper", this.staticModal.className);

const staticDialog = (
<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>
</TooltipProvider>
);

ReactDOM.render(staticDialog, ModalManager.getOrCreateStaticContainer());
Expand All @@ -441,16 +443,18 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
});

const dialog = (
<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>
</TooltipProvider>
);

setTimeout(() => ReactDOM.render(dialog, ModalManager.getOrCreateContainer()), 0);
Expand Down
21 changes: 12 additions & 9 deletions src/components/structures/ContextMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ 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";
Expand Down Expand Up @@ -621,15 +622,17 @@ export function createMenu(
};

const menu = (
<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>
</TooltipProvider>
);

ReactDOM.render(menu, getOrCreateContainer());
Expand Down
6 changes: 3 additions & 3 deletions src/components/structures/MatrixChat.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2149,9 +2149,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {

return (
<ErrorBoundary>
<TooltipProvider>
<SDKContext.Provider value={this.stores}>{view}</SDKContext.Provider>
</TooltipProvider>
<SDKContext.Provider value={this.stores}>
<TooltipProvider>{view}</TooltipProvider>
</SDKContext.Provider>
</ErrorBoundary>
);
}
Expand Down
9 changes: 6 additions & 3 deletions src/components/views/elements/PersistedElement.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
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";
Expand Down Expand Up @@ -167,9 +168,11 @@ export default class PersistedElement extends React.Component<IProps> {
private renderApp(): void {
const content = (
<MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>
<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>
</TooltipProvider>
</MatrixClientContext.Provider>
);

Expand Down
7 changes: 6 additions & 1 deletion src/components/views/messages/TextualBody.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ Please see LICENSE files in the repository root for full details.
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";
Expand Down Expand Up @@ -335,7 +336,11 @@ 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 = <Spoiler reason={reason} contentHtml={node.outerHTML} />;
const spoiler = (
<TooltipProvider>
<Spoiler reason={reason} contentHtml={node.outerHTML} />
</TooltipProvider>
);

ReactDOM.render(spoiler, spoilerContainer);
node.parentNode?.replaceChild(spoilerContainer, node);
Expand Down
66 changes: 34 additions & 32 deletions src/toasts/IncomingCallToast.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.

import React, { useCallback, useEffect, useState } from "react";
import { MatrixEvent, RoomMember } from "matrix-js-sdk/src/matrix";
import { Button, Tooltip } from "@vector-im/compound-web";
import { Button, Tooltip, TooltipProvider } from "@vector-im/compound-web";
import { Icon as VideoCallIcon } from "@vector-im/compound-design-tokens/icons/video-call-solid.svg";

import { _t } from "../languageHandler";
Expand Down Expand Up @@ -163,38 +163,40 @@ export function IncomingCallToast({ notifyEvent }: Props): JSX.Element {
useEventEmitter(call ?? undefined, CallEvent.Participants, onParticipantChange);

return (
<>
<div>
<RoomAvatar room={room ?? undefined} size="24px" />
</div>
<div className="mx_IncomingCallToast_content">
<div className="mx_IncomingCallToast_info">
<span className="mx_IncomingCallToast_room">
{room ? room.name : _t("voip|call_toast_unknown_room")}
</span>
<div className="mx_IncomingCallToast_message">{_t("voip|video_call_started")}</div>
{call ? (
<LiveContentSummaryWithCall call={call} />
) : (
<LiveContentSummary
type={LiveContentType.Video}
text={_t("common|video")}
active={false}
participantCount={0}
/>
)}
<TooltipProvider>
<>
<div>
<RoomAvatar room={room ?? undefined} size="24px" />
</div>
<JoinCallButtonWithCall
onClick={onJoinClick}
call={call}
disabledTooltip={otherCallIsOngoing ? "Ongoing call" : undefined}
<div className="mx_IncomingCallToast_content">
<div className="mx_IncomingCallToast_info">
<span className="mx_IncomingCallToast_room">
{room ? room.name : _t("voip|call_toast_unknown_room")}
</span>
<div className="mx_IncomingCallToast_message">{_t("voip|video_call_started")}</div>
{call ? (
<LiveContentSummaryWithCall call={call} />
) : (
<LiveContentSummary
type={LiveContentType.Video}
text={_t("common|video")}
active={false}
participantCount={0}
/>
)}
</div>
<JoinCallButtonWithCall
onClick={onJoinClick}
call={call}
disabledTooltip={otherCallIsOngoing ? "Ongoing call" : undefined}
/>
</div>
<AccessibleButton
className="mx_IncomingCallToast_closeButton"
onClick={onCloseClick}
title={_t("action|close")}
/>
</div>
<AccessibleButton
className="mx_IncomingCallToast_closeButton"
onClick={onCloseClick}
title={_t("action|close")}
/>
</>
</>
</TooltipProvider>
);
}
41 changes: 22 additions & 19 deletions src/utils/exportUtils/HtmlExport.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ 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";
Expand Down Expand Up @@ -271,25 +272,27 @@ export default class HTMLExporter extends Exporter {
return (
<div className="mx_Export_EventWrapper" id={mxEv.getId()}>
<MatrixClientContext.Provider value={this.room.client}>
<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}
/>
</TooltipProvider>
</MatrixClientContext.Provider>
</div>
);
Expand Down
19 changes: 12 additions & 7 deletions src/utils/pillify.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ 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";
Expand Down Expand Up @@ -75,7 +76,9 @@ export function pillifyLinks(
const pillContainer = document.createElement("span");

const pill = (
<Pill url={href} inMessage={true} room={room} shouldShowPillAvatar={shouldShowPillAvatar} />
<TooltipProvider>
<Pill url={href} inMessage={true} room={room} shouldShowPillAvatar={shouldShowPillAvatar} />
</TooltipProvider>
);

ReactDOM.render(pill, pillContainer);
Expand Down Expand Up @@ -130,12 +133,14 @@ export function pillifyLinks(

const pillContainer = document.createElement("span");
const pill = (
<Pill
type={PillType.AtRoomMention}
inMessage={true}
room={room}
shouldShowPillAvatar={shouldShowPillAvatar}
/>
<TooltipProvider>
<Pill
type={PillType.AtRoomMention}
inMessage={true}
room={room}
shouldShowPillAvatar={shouldShowPillAvatar}
/>
</TooltipProvider>
);

ReactDOM.render(pill, pillContainer);
Expand Down
9 changes: 6 additions & 3 deletions src/utils/tooltipify.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.

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";
Expand Down Expand Up @@ -52,9 +53,11 @@ 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 = (
<LinkWithTooltip tooltip={href}>
<span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
</LinkWithTooltip>
<TooltipProvider>
<LinkWithTooltip tooltip={href}>
<span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
</LinkWithTooltip>
</TooltipProvider>
);

ReactDOM.render(tooltip, node);
Expand Down
5 changes: 4 additions & 1 deletion test/components/structures/MessagePanel-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ 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";
Expand Down Expand Up @@ -90,7 +91,9 @@ describe("MessagePanel", function () {
const getComponent = (props = {}, roomContext: Partial<IRoomState> = {}) => (
<MatrixClientContext.Provider value={client}>
<RoomContext.Provider value={{ ...defaultRoomContext, ...roomContext }}>
<MessagePanel {...defaultProps} {...props} />
<TooltipProvider>
<MessagePanel {...defaultProps} {...props} />
</TooltipProvider>
</RoomContext.Provider>
</MatrixClientContext.Provider>
);
Expand Down
2 changes: 2 additions & 0 deletions test/components/structures/RightPanel-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ 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";
Expand Down Expand Up @@ -114,6 +115,7 @@ describe("RightPanel", () => {
resizeNotifier={resizeNotifier}
permalinkCreator={new RoomPermalinkCreator(r1, r1.roomId)}
/>,
{ wrapper: TooltipProvider },
);
// Wait for RPS room 1 updates to fire
const rpsUpdated = waitForRpsUpdate();
Expand Down
Loading

0 comments on commit 80940d0

Please sign in to comment.