Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 56d8ef3

Browse files
renovate[bot]t3chguy
renovate[bot]
and
t3chguy
authored
Update dependency @vector-im/compound-web to v2 (#12133)
* Update dependency @vector-im/compound-web to v2 * Update Tooltip props Signed-off-by: Michael Telatynski <[email protected]> * Include TooltipProvider in MatrixChat Signed-off-by: Michael Telatynski <[email protected]> * Fix pillify & tooltipify Signed-off-by: Michael Telatynski <[email protected]> * Update tests to use TooltipProvider where necessary Signed-off-by: Michael Telatynski <[email protected]> * Fix tooltips in Modals, ContextMenus, PersistedElements, Spoiler, HtmlExport Signed-off-by: Michael Telatynski <[email protected]> * Update tests Signed-off-by: Michael Telatynski <[email protected]> * delint Signed-off-by: Michael Telatynski <[email protected]> * Update tests Signed-off-by: Michael Telatynski <[email protected]> * Fix tooltips in HTMLExport Signed-off-by: Michael Telatynski <[email protected]> * Don't pass mountAsChild to DOM Signed-off-by: Michael Telatynski <[email protected]> * prettier Signed-off-by: Michael Telatynski <[email protected]> * Stabilise test Signed-off-by: Michael Telatynski <[email protected]> --------- Signed-off-by: Michael Telatynski <[email protected]> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Michael Telatynski <[email protected]>
1 parent 54b7114 commit 56d8ef3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+293
-221
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@
7676
"@sentry/browser": "^7.0.0",
7777
"@testing-library/react-hooks": "^8.0.1",
7878
"@vector-im/compound-design-tokens": "^0.1.0",
79-
"@vector-im/compound-web": "1.0.0",
79+
"@vector-im/compound-web": "2.0.0",
8080
"@zxcvbn-ts/core": "^3.0.4",
8181
"@zxcvbn-ts/language-common": "^3.0.4",
8282
"@zxcvbn-ts/language-en": "^3.0.2",

‎playwright/e2e/crypto/crypto.spec.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -336,7 +336,7 @@ test.describe("Cryptography", function () {
336336
await expect(last).toContainText("Unable to decrypt message");
337337
const lastE2eIcon = last.locator(".mx_EventTile_e2eIcon");
338338
await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_decryption_failure/);
339-
await lastE2eIcon.hover();
339+
await lastE2eIcon.focus();
340340
await expect(page.getByRole("tooltip")).toContainText("This message could not be decrypted");
341341

342342
/* Should show a red padlock for an unencrypted message in an e2e room */
@@ -356,7 +356,7 @@ test.describe("Cryptography", function () {
356356

357357
await expect(last).toContainText("test unencrypted");
358358
await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
359-
await lastE2eIcon.hover();
359+
await lastE2eIcon.focus();
360360
await expect(page.getByRole("tooltip")).toContainText("Not encrypted");
361361

362362
/* Should show no padlock for an unverified user */
@@ -389,7 +389,7 @@ test.describe("Cryptography", function () {
389389
await bobSecondDevice.sendMessage(testRoomId, "test encrypted from unverified");
390390
await expect(lastTile).toContainText("test encrypted from unverified");
391391
await expect(lastTileE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
392-
await lastTileE2eIcon.hover();
392+
await lastTileE2eIcon.focus();
393393
await expect(page.getByRole("tooltip")).toContainText("Encrypted by a device not verified by its owner.");
394394

395395
/* Should show a grey padlock for a message from an unknown device */
@@ -428,7 +428,7 @@ test.describe("Cryptography", function () {
428428
} else {
429429
await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_normal/);
430430
}
431-
await lastE2eIcon.hover();
431+
await lastE2eIcon.focus();
432432
await expect(page.getByRole("tooltip")).toContainText("Encrypted by an unknown or deleted device.");
433433
});
434434

‎src/Modal.tsx

+21-16
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import ReactDOM from "react-dom";
2020
import classNames from "classnames";
2121
import { defer, sleep } from "matrix-js-sdk/src/utils";
2222
import { TypedEventEmitter } from "matrix-js-sdk/src/matrix";
23+
import { TooltipProvider } from "@vector-im/compound-web";
2324

2425
import dis from "./dispatcher/dispatcher";
2526
import AsyncWrapper from "./AsyncWrapper";
@@ -373,14 +374,16 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
373374
const classes = classNames("mx_Dialog_wrapper mx_Dialog_staticWrapper", this.staticModal.className);
374375

375376
const staticDialog = (
376-
<div className={classes}>
377-
<div className="mx_Dialog">{this.staticModal.elem}</div>
378-
<div
379-
data-testid="dialog-background"
380-
className="mx_Dialog_background mx_Dialog_staticBackground"
381-
onClick={this.onBackgroundClick}
382-
/>
383-
</div>
377+
<TooltipProvider>
378+
<div className={classes}>
379+
<div className="mx_Dialog">{this.staticModal.elem}</div>
380+
<div
381+
data-testid="dialog-background"
382+
className="mx_Dialog_background mx_Dialog_staticBackground"
383+
onClick={this.onBackgroundClick}
384+
/>
385+
</div>
386+
</TooltipProvider>
384387
);
385388

386389
ReactDOM.render(staticDialog, ModalManager.getOrCreateStaticContainer());
@@ -396,14 +399,16 @@ export class ModalManager extends TypedEventEmitter<ModalManagerEvent, HandlerMa
396399
});
397400

398401
const dialog = (
399-
<div className={classes}>
400-
<div className="mx_Dialog">{modal.elem}</div>
401-
<div
402-
data-testid="dialog-background"
403-
className="mx_Dialog_background"
404-
onClick={this.onBackgroundClick}
405-
/>
406-
</div>
402+
<TooltipProvider>
403+
<div className={classes}>
404+
<div className="mx_Dialog">{modal.elem}</div>
405+
<div
406+
data-testid="dialog-background"
407+
className="mx_Dialog_background"
408+
onClick={this.onBackgroundClick}
409+
/>
410+
</div>
411+
</TooltipProvider>
407412
);
408413

409414
setImmediate(() => ReactDOM.render(dialog, ModalManager.getOrCreateContainer()));

‎src/components/structures/ContextMenu.tsx

+13-9
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import React, { CSSProperties, RefObject, SyntheticEvent, useRef, useState } fro
2020
import ReactDOM from "react-dom";
2121
import classNames from "classnames";
2222
import FocusLock from "react-focus-lock";
23+
import { TooltipProvider } from "@vector-im/compound-web";
2324

2425
import { Writeable } from "../../@types/common";
2526
import UIStore from "../../stores/UIStore";
@@ -266,6 +267,7 @@ export default class ContextMenu extends React.PureComponent<React.PropsWithChil
266267
wrapperClassName,
267268
chevronFace: propsChevronFace,
268269
chevronOffset: propsChevronOffset,
270+
mountAsChild,
269271
...props
270272
} = this.props;
271273

@@ -628,15 +630,17 @@ export function createMenu(
628630
};
629631

630632
const menu = (
631-
<ContextMenu
632-
{...props}
633-
mountAsChild={true}
634-
hasBackground={false}
635-
onFinished={onFinished} // eslint-disable-line react/jsx-no-bind
636-
windowResize={onFinished} // eslint-disable-line react/jsx-no-bind
637-
>
638-
<ElementClass {...props} onFinished={onFinished} />
639-
</ContextMenu>
633+
<TooltipProvider>
634+
<ContextMenu
635+
{...props}
636+
mountAsChild={true}
637+
hasBackground={false}
638+
onFinished={onFinished} // eslint-disable-line react/jsx-no-bind
639+
windowResize={onFinished} // eslint-disable-line react/jsx-no-bind
640+
>
641+
<ElementClass {...props} onFinished={onFinished} />
642+
</ContextMenu>
643+
</TooltipProvider>
640644
);
641645

642646
ReactDOM.render(menu, getOrCreateContainer());

‎src/components/structures/MatrixChat.tsx

+4-1
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import { throttle } from "lodash";
3434
import { CryptoEvent } from "matrix-js-sdk/src/crypto";
3535
import { DecryptionError } from "matrix-js-sdk/src/crypto/algorithms";
3636
import { IKeyBackupInfo } from "matrix-js-sdk/src/crypto/keybackup";
37+
import { TooltipProvider } from "@vector-im/compound-web";
3738

3839
// what-input helps improve keyboard accessibility
3940
import "what-input";
@@ -2189,7 +2190,9 @@ export default class MatrixChat extends React.PureComponent<IProps, IState> {
21892190

21902191
return (
21912192
<ErrorBoundary>
2192-
<SDKContext.Provider value={this.stores}>{view}</SDKContext.Provider>
2193+
<SDKContext.Provider value={this.stores}>
2194+
<TooltipProvider>{view}</TooltipProvider>
2195+
</SDKContext.Provider>
21932196
</ErrorBoundary>
21942197
);
21952198
}

‎src/components/views/elements/FacePile.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ const FacePile: FC<IProps> = ({
4646
tooltipLabel
4747
? (m) => <MemberAvatar key={m.userId} member={m} size={size} hideTitle />
4848
: (m) => (
49-
<Tooltip key={m.userId} label={m.name} shortcut={tooltipShortcut}>
49+
<Tooltip key={m.userId} label={m.name} caption={tooltipShortcut}>
5050
<MemberAvatar
5151
member={m}
5252
size={size}
@@ -72,7 +72,7 @@ const FacePile: FC<IProps> = ({
7272
);
7373

7474
return tooltipLabel ? (
75-
<Tooltip label={tooltipLabel} shortcut={tooltipShortcut}>
75+
<Tooltip label={tooltipLabel} caption={tooltipShortcut}>
7676
{content}
7777
</Tooltip>
7878
) : (

‎src/components/views/elements/PersistedElement.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ limitations under the License.
1717
import React, { MutableRefObject, ReactNode } from "react";
1818
import ReactDOM from "react-dom";
1919
import { isNullOrUndefined } from "matrix-js-sdk/src/utils";
20+
import { TooltipProvider } from "@vector-im/compound-web";
2021

2122
import dis from "../../../dispatcher/dispatcher";
2223
import MatrixClientContext from "../../../contexts/MatrixClientContext";
@@ -176,9 +177,11 @@ export default class PersistedElement extends React.Component<IProps> {
176177
private renderApp(): void {
177178
const content = (
178179
<MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>
179-
<div ref={this.collectChild} style={this.props.style}>
180-
{this.props.children}
181-
</div>
180+
<TooltipProvider>
181+
<div ref={this.collectChild} style={this.props.style}>
182+
{this.props.children}
183+
</div>
184+
</TooltipProvider>
182185
</MatrixClientContext.Provider>
183186
);
184187

‎src/components/views/messages/TextualBody.tsx

+6-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import React, { createRef, SyntheticEvent, MouseEvent } from "react";
1818
import ReactDOM from "react-dom";
1919
import highlight from "highlight.js";
2020
import { MsgType } from "matrix-js-sdk/src/matrix";
21+
import { TooltipProvider } from "@vector-im/compound-web";
2122

2223
import * as HtmlUtils from "../../../HtmlUtils";
2324
import { formatDate } from "../../../DateUtils";
@@ -347,7 +348,11 @@ export default class TextualBody extends React.Component<IBodyProps, IState> {
347348

348349
const reason = node.getAttribute("data-mx-spoiler") ?? undefined;
349350
node.removeAttribute("data-mx-spoiler"); // we don't want to recurse
350-
const spoiler = <Spoiler reason={reason} contentHtml={node.outerHTML} />;
351+
const spoiler = (
352+
<TooltipProvider>
353+
<Spoiler reason={reason} contentHtml={node.outerHTML} />
354+
</TooltipProvider>
355+
);
351356

352357
ReactDOM.render(spoiler, spoilerContainer);
353358
node.parentNode?.replaceChild(spoilerContainer, node);

‎src/utils/exportUtils/HtmlExport.tsx

+22-19
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { Room, MatrixEvent, EventType, MsgType } from "matrix-js-sdk/src/matrix"
2020
import { renderToStaticMarkup } from "react-dom/server";
2121
import { logger } from "matrix-js-sdk/src/logger";
2222
import escapeHtml from "escape-html";
23+
import { TooltipProvider } from "@vector-im/compound-web";
2324

2425
import Exporter from "./Exporter";
2526
import { mediaFromMxc } from "../../customisations/Media";
@@ -283,25 +284,27 @@ export default class HTMLExporter extends Exporter {
283284
return (
284285
<div className="mx_Export_EventWrapper" id={mxEv.getId()}>
285286
<MatrixClientContext.Provider value={this.room.client}>
286-
<EventTile
287-
mxEvent={mxEv}
288-
continuation={continuation}
289-
isRedacted={mxEv.isRedacted()}
290-
replacingEventId={mxEv.replacingEventId()}
291-
forExport={true}
292-
alwaysShowTimestamps={true}
293-
showUrlPreview={false}
294-
checkUnmounting={() => false}
295-
isTwelveHour={false}
296-
last={false}
297-
lastInSection={false}
298-
permalinkCreator={this.permalinkCreator}
299-
lastSuccessful={false}
300-
isSelectedEvent={false}
301-
showReactions={false}
302-
layout={Layout.Group}
303-
showReadReceipts={false}
304-
/>
287+
<TooltipProvider>
288+
<EventTile
289+
mxEvent={mxEv}
290+
continuation={continuation}
291+
isRedacted={mxEv.isRedacted()}
292+
replacingEventId={mxEv.replacingEventId()}
293+
forExport={true}
294+
alwaysShowTimestamps={true}
295+
showUrlPreview={false}
296+
checkUnmounting={() => false}
297+
isTwelveHour={false}
298+
last={false}
299+
lastInSection={false}
300+
permalinkCreator={this.permalinkCreator}
301+
lastSuccessful={false}
302+
isSelectedEvent={false}
303+
showReactions={false}
304+
layout={Layout.Group}
305+
showReadReceipts={false}
306+
/>
307+
</TooltipProvider>
305308
</MatrixClientContext.Provider>
306309
</div>
307310
);

‎src/utils/pillify.tsx

+12-7
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import React from "react";
1818
import ReactDOM from "react-dom";
1919
import { PushProcessor } from "matrix-js-sdk/src/pushprocessor";
2020
import { MatrixEvent, MatrixClient } from "matrix-js-sdk/src/matrix";
21+
import { TooltipProvider } from "@vector-im/compound-web";
2122

2223
import SettingsStore from "../settings/SettingsStore";
2324
import { Pill, PillType, pillRoomNotifLen, pillRoomNotifPos } from "../components/views/elements/Pill";
@@ -83,7 +84,9 @@ export function pillifyLinks(
8384
const pillContainer = document.createElement("span");
8485

8586
const pill = (
86-
<Pill url={href} inMessage={true} room={room} shouldShowPillAvatar={shouldShowPillAvatar} />
87+
<TooltipProvider>
88+
<Pill url={href} inMessage={true} room={room} shouldShowPillAvatar={shouldShowPillAvatar} />
89+
</TooltipProvider>
8790
);
8891

8992
ReactDOM.render(pill, pillContainer);
@@ -136,12 +139,14 @@ export function pillifyLinks(
136139

137140
const pillContainer = document.createElement("span");
138141
const pill = (
139-
<Pill
140-
type={PillType.AtRoomMention}
141-
inMessage={true}
142-
room={room}
143-
shouldShowPillAvatar={shouldShowPillAvatar}
144-
/>
142+
<TooltipProvider>
143+
<Pill
144+
type={PillType.AtRoomMention}
145+
inMessage={true}
146+
room={room}
147+
shouldShowPillAvatar={shouldShowPillAvatar}
148+
/>
149+
</TooltipProvider>
145150
);
146151

147152
ReactDOM.render(pill, pillContainer);

‎src/utils/tooltipify.tsx

+6-3
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ limitations under the License.
1616

1717
import React from "react";
1818
import ReactDOM from "react-dom";
19+
import { TooltipProvider } from "@vector-im/compound-web";
1920

2021
import PlatformPeg from "../PlatformPeg";
2122
import LinkWithTooltip from "../components/views/elements/LinkWithTooltip";
@@ -60,9 +61,11 @@ export function tooltipifyLinks(rootNodes: ArrayLike<Element>, ignoredNodes: Ele
6061
// wrapping the link with the LinkWithTooltip component, keeping the same children. Ideally we'd do this
6162
// without the superfluous span but this is not something React trivially supports at this time.
6263
const tooltip = (
63-
<LinkWithTooltip tooltip={href}>
64-
<span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
65-
</LinkWithTooltip>
64+
<TooltipProvider>
65+
<LinkWithTooltip tooltip={href}>
66+
<span dangerouslySetInnerHTML={{ __html: node.innerHTML }} />
67+
</LinkWithTooltip>
68+
</TooltipProvider>
6669
);
6770

6871
ReactDOM.render(tooltip, node);

‎test/components/structures/MessagePanel-test.tsx

+4-2
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import React from "react";
1919
import { EventEmitter } from "events";
2020
import { MatrixEvent, Room, RoomMember, Thread, ReceiptType } from "matrix-js-sdk/src/matrix";
2121
import { render } from "@testing-library/react";
22+
import { TooltipProvider } from "@vector-im/compound-web";
2223

2324
import MessagePanel, { shouldFormContinuation } from "../../../src/components/structures/MessagePanel";
2425
import SettingsStore from "../../../src/settings/SettingsStore";
@@ -97,9 +98,10 @@ describe("MessagePanel", function () {
9798
const getComponent = (props = {}, roomContext: Partial<IRoomState> = {}) => (
9899
<MatrixClientContext.Provider value={client}>
99100
<RoomContext.Provider value={{ ...defaultRoomContext, ...roomContext }}>
100-
<MessagePanel {...defaultProps} {...props} />
101+
<TooltipProvider>
102+
<MessagePanel {...defaultProps} {...props} />
103+
</TooltipProvider>
101104
</RoomContext.Provider>
102-
);
103105
</MatrixClientContext.Provider>
104106
);
105107

‎test/components/structures/RightPanel-test.tsx

+2
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { render, screen, waitFor } from "@testing-library/react";
1919
import { jest } from "@jest/globals";
2020
import { mocked, MockedObject } from "jest-mock";
2121
import { MatrixClient } from "matrix-js-sdk/src/matrix";
22+
import { TooltipProvider } from "@vector-im/compound-web";
2223

2324
import _RightPanel from "../../../src/components/structures/RightPanel";
2425
import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
@@ -122,6 +123,7 @@ describe("RightPanel", () => {
122123
resizeNotifier={resizeNotifier}
123124
permalinkCreator={new RoomPermalinkCreator(r1, r1.roomId)}
124125
/>,
126+
{ wrapper: TooltipProvider },
125127
);
126128
// Wait for RPS room 1 updates to fire
127129
const rpsUpdated = waitForRpsUpdate();

0 commit comments

Comments
 (0)