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

Migrate TooltipTarget usage to compound Tooltip (#12542)

Browse source 
* Use new tooltip in `RoomTopic.tsx`

* Use new tooltip in `MLocationBody.tsx`

* Fix room topic

* Update location snapshot

* Use new tooltip in `AppPermission.tsx`

* Remove `TooltipTarget`

* Add tests for `RoomTopic`
This commit is contained in:
Florian Duros 2024-05-22 14:15:07 +02:00 committed by GitHub
parent a29cabe45a
commit 1190de9028
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
12 changed files with 91 additions and 384 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
playwright/snapshots/threads/threads.spec.ts/Reply-to-the-location-on-ThreadView-linux.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 18 KiB

21
res/css/components/views/elements/_AppPermission.pcss
View file

@ -44,24 +44,3 @@ limitations under the License.
}
}
}
.mx_Tooltip.mx_Tooltip--appPermission {
box-shadow: none;
background-color: $tooltip-timeline-bg-color;
color: $tooltip-timeline-fg-color;
border: none;
border-radius: 3px;
padding: 6px 8px;
&.mx_Tooltip--appPermission--dark {
.mx_Tooltip_chevron::after {
border-right-color: $tooltip-timeline-bg-color;
}
}
ul {
list-style-position: inside;
padding-left: 2px;
margin-left: 0;
}
}

44
src/components/views/elements/AppPermission.tsx
View file

@ -18,6 +18,7 @@ limitations under the License.
import React from "react";
import { RoomMember } from "matrix-js-sdk/src/matrix";
import { Tooltip } from "@vector-im/compound-web";
import { _t } from "../../../languageHandler";
import SdkConfig from "../../../SdkConfig";
@ -29,7 +30,6 @@ import Heading from "../typography/Heading";
import AccessibleButton from "./AccessibleButton";
import { parseUrl } from "../../../utils/UrlUtils";
import { Icon as HelpIcon } from "../../../../res/img/feather-customised/help-circle.svg";
import TooltipTarget from "./TooltipTarget";
interface IProps {
url: string;
@ -99,31 +99,27 @@ export default class AppPermission extends React.Component<IProps, IState> {
<BaseAvatar name={this.props.creatorUserId} size="38px" />
);
const warningTooltipText = (
<div>
{_t("analytics|shared_data_heading")}
<ul>
<li>{_t("widget|shared_data_name")}</li>
<li>{_t("widget|shared_data_avatar")}</li>
<li>{_t("widget|shared_data_mxid")}</li>
<li>{_t("widget|shared_data_device_id")}</li>
<li>{_t("widget|shared_data_theme")}</li>
<li>{_t("widget|shared_data_lang")}</li>
<li>{_t("widget|shared_data_url", { brand })}</li>
<li>{_t("widget|shared_data_room_id")}</li>
<li>{_t("widget|shared_data_widget_id")}</li>
</ul>
</div>
);
const warningTooltip = (
<TooltipTarget
label={warningTooltipText}
tooltipClassName="mx_Tooltip--appPermission mx_Tooltip--appPermission--dark"
tooltipTargetClassName="mx_TextWithTooltip_target mx_TextWithTooltip_target--helpIcon"
className="mx_TextWithTooltip_tooltip"
<Tooltip
label={_t("analytics|shared_data_heading")}
caption={
<ul>
<li>{_t("widget|shared_data_name")}</li>
<li>{_t("widget|shared_data_avatar")}</li>
<li>{_t("widget|shared_data_mxid")}</li>
<li>{_t("widget|shared_data_device_id")}</li>
<li>{_t("widget|shared_data_theme")}</li>
<li>{_t("widget|shared_data_lang")}</li>
<li>{_t("widget|shared_data_url", { brand })}</li>
<li>{_t("widget|shared_data_room_id")}</li>
<li>{_t("widget|shared_data_widget_id")}</li>
</ul>
}
>
<HelpIcon className="mx_Icon mx_Icon_12" />
</TooltipTarget>
<div className="mx_TextWithTooltip_target mx_TextWithTooltip_target--helpIcon">
<HelpIcon className="mx_Icon mx_Icon_12" />
</div>
</Tooltip>
);
// Due to i18n limitations, we can't dedupe the code for variables in these two messages.

45
src/components/views/elements/RoomTopic.tsx
View file

@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { useCallback, useContext, useRef } from "react";
import React, { useCallback, useContext, useState } from "react";
import { Room, EventType } from "matrix-js-sdk/src/matrix";
import classNames from "classnames";
import { Tooltip } from "@vector-im/compound-web";
import { useTopic } from "../../../hooks/room/useTopic";
import { Alignment } from "./Tooltip";
import { _t } from "../../../languageHandler";
import dis from "../../../dispatcher/dispatcher";
import { Action } from "../../../dispatcher/actions";
@ -28,7 +28,6 @@ import InfoDialog from "../dialogs/InfoDialog";
import { useDispatcher } from "../../../hooks/useDispatcher";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import AccessibleButton from "./AccessibleButton";
import TooltipTarget from "./TooltipTarget";
import { Linkify, topicToHtml } from "../../../HtmlUtils";
import { tryTransformPermalinkToLocalHref } from "../../../utils/permalinks/Permalinks";
@ -49,10 +48,10 @@ export function onRoomTopicLinkClick(e: React.MouseEvent): void {
export default function RoomTopic({ room, className, ...props }: IProps): JSX.Element {
const client = useContext(MatrixClientContext);
const ref = useRef<HTMLDivElement>(null);
const [disableTooltip, setDisableTooltip] = useState(false);
const topic = useTopic(room);
const body = topicToHtml(topic?.text, topic?.html, ref);
const body = topicToHtml(topic?.text, topic?.html);
const onClick = useCallback(
(e: React.MouseEvent<HTMLDivElement>) => {
@ -70,14 +69,14 @@ export default function RoomTopic({ room, className, ...props }: IProps): JSX.El
[props],
);
const ignoreHover = (ev: React.MouseEvent): boolean => {
return (ev.target as HTMLElement).tagName.toUpperCase() === "A";
const onHover = (ev: React.MouseEvent | React.FocusEvent): void => {
setDisableTooltip((ev.target as HTMLElement).tagName.toUpperCase() === "A");
};
useDispatcher(dis, (payload) => {
if (payload.action === Action.ShowRoomTopic) {
const canSetTopic = room.currentState.maySendStateEvent(EventType.RoomTopic, client.getSafeUserId());
const body = topicToHtml(topic?.text, topic?.html, ref, true);
const body = topicToHtml(topic?.text, topic?.html, undefined, true);
const modal = Modal.createDialog(InfoDialog, {
title: room.name,
@ -115,18 +114,24 @@ export default function RoomTopic({ room, className, ...props }: IProps): JSX.El
}
});
// Do not render the tooltip if the topic is empty
// We still need to have a div for the header buttons to be displayed correctly
if (!body) return <div className={classNames(className, "mx_RoomTopic")} />;
return (
<TooltipTarget
{...props}
ref={ref}
onClick={onClick}
dir="auto"
tooltipTargetClassName={classNames(className, "mx_RoomTopic")}
label={_t("room|read_topic")}
alignment={Alignment.Bottom}
ignoreHover={ignoreHover}
>
<Linkify>{body}</Linkify>
</TooltipTarget>
<Tooltip label={_t("room|read_topic")} disabled={disableTooltip}>
<div
{...props}
tabIndex={0}
role="button"
onClick={onClick}
className={classNames(className, "mx_RoomTopic")}
onMouseOver={onHover}
onFocus={onHover}
aria-label={_t("room|read_topic")}
>
<Linkify>{body}</Linkify>
</div>
</Tooltip>
);
}

92
src/components/views/elements/TooltipTarget.tsx
View file

@ -1,92 +0,0 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { forwardRef, HTMLAttributes, useRef } from "react";
import { randomString } from "matrix-js-sdk/src/randomstring";
import useFocus from "../../../hooks/useFocus";
import useHover from "../../../hooks/useHover";
import Tooltip, { ITooltipProps } from "./Tooltip";
interface IProps
extends HTMLAttributes<HTMLSpanElement>,
Omit<ITooltipProps, "visible" | "tabIndex" | "aria-describedby"> {
tooltipTargetClassName?: string;
ignoreHover?: (ev: React.MouseEvent) => boolean;
}
/**
* Generic tooltip target element that handles tooltip visibility state
* and displays children
*/
const TooltipTarget = forwardRef<HTMLDivElement, IProps>(
(
{
children,
tooltipTargetClassName,
// tooltip pass through props
className,
id,
label,
alignment,
tooltipClassName,
maxParentWidth,
ignoreHover,
...rest
},
ref,
) => {
const idRef = useRef("mx_TooltipTarget_" + randomString(8));
// Use generated ID if one is not passed
if (id === undefined) {
id = idRef.current;
}
const [isFocused, focusProps] = useFocus();
const [isHovering, hoverProps] = useHover(ignoreHover || (() => false));
// No need to fill up the DOM with hidden tooltip elements. Only add the
// tooltip when we're hovering over the item (performance)
const tooltip = (isFocused || isHovering) && (
<Tooltip
id={id}
className={className}
tooltipClassName={tooltipClassName}
label={label}
alignment={alignment}
visible={isFocused || isHovering}
maxParentWidth={maxParentWidth}
/>
);
return (
<div
{...hoverProps}
{...focusProps}
tabIndex={0}
aria-describedby={id}
className={tooltipTargetClassName}
{...rest}
ref={ref}
>
{children}
{tooltip}
</div>
);
},
);
export default TooltipTarget;

15
src/components/views/messages/MLocationBody.tsx
View file

@ -17,6 +17,7 @@ limitations under the License.
import React from "react";
import { MatrixEvent, ClientEvent, ClientEventHandlerMap } from "matrix-js-sdk/src/matrix";
import { randomString } from "matrix-js-sdk/src/randomstring";
import { Tooltip } from "@vector-im/compound-web";
import { _t } from "../../../languageHandler";
import Modal from "../../../Modal";
@ -27,8 +28,6 @@ import {
isSelfLocation,
} from "../../../utils/location";
import MatrixClientContext from "../../../contexts/MatrixClientContext";
import TooltipTarget from "../elements/TooltipTarget";
import { Alignment } from "../elements/Tooltip";
import { SmartMarker, Map, LocationViewDialog } from "../location";
import { IBodyProps } from "./IBodyProps";
import { createReconnectedListener } from "../../../utils/connection";
@ -126,7 +125,7 @@ export const LocationBodyFallbackContent: React.FC<{ event: MatrixEvent; error:
interface LocationBodyContentProps {
mxEvent: MatrixEvent;
mapId: string;
tooltip?: string;
tooltip: string;
onError: (error: Error) => void;
onClick?: () => void;
}
@ -156,13 +155,9 @@ export const LocationBodyContent: React.FC<LocationBodyContentProps> = ({
return (
<div className="mx_MLocationBody">
{tooltip ? (
<TooltipTarget label={tooltip} alignment={Alignment.InnerBottom} maxParentWidth={450}>
{mapElement}
</TooltipTarget>
) : (
mapElement
)}
<Tooltip label={tooltip}>
<div className="mx_MLocationBody_map">{mapElement}</div>
</Tooltip>
</div>
);
};

12
test/components/structures/__snapshots__/RoomView-test.tsx.snap
View file

@ -43,10 +43,7 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
</div>
</div>
<div
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
class="mx_LegacyRoomHeader_topic mx_RoomTopic"
dir="auto"
tabindex="0"
/>
</div>
</header>
@ -121,10 +118,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
</div>
</div>
<div
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
class="mx_LegacyRoomHeader_topic mx_RoomTopic"
dir="auto"
tabindex="0"
/>
</div>
</header>
@ -284,10 +278,7 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
</div>
</div>
<div
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
class="mx_LegacyRoomHeader_topic mx_RoomTopic"
dir="auto"
tabindex="0"
/>
</div>
</header>
@ -531,10 +522,7 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
</div>
</div>
<div
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
class="mx_LegacyRoomHeader_topic mx_RoomTopic"
dir="auto"
tabindex="0"
/>
</div>
</header>

44
test/components/views/elements/RoomTopic-test.tsx
View file

@ -16,7 +16,8 @@ limitations under the License.
import React from "react";
import { Room } from "matrix-js-sdk/src/matrix";
import { fireEvent, render, screen } from "@testing-library/react";
import { fireEvent, render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { mkEvent, stubClient } from "../../../test-utils";
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
@ -33,9 +34,12 @@ describe("<RoomTopic/>", () => {
window.location.href = originalHref;
});
function runClickTest(topic: string, clickText: string) {
/**
* Create a room with the given topic
* @param topic
*/
function createRoom(topic: string) {
stubClient();
const room = new Room("!pMBteVpcoJRdCJxDmn:matrix.org", MatrixClientPeg.safeGet(), "@alice:example.org");
const topicEvent = mkEvent({
type: "m.room.topic",
@ -45,11 +49,27 @@ describe("<RoomTopic/>", () => {
ts: 123,
event: true,
});
room.addLiveEvents([topicEvent]);
render(<RoomTopic room={room} />);
return room;
}
/**
* Create a room and render it
* @param topic
*/
const renderRoom = (topic: string) => {
const room = createRoom(topic);
render(<RoomTopic room={room} />);
};
/**
* Create a room and click on the given text
* @param topic
* @param clickText
*/
function runClickTest(topic: string, clickText: string) {
renderRoom(topic);
fireEvent.click(screen.getByText(clickText));
}
@ -78,4 +98,18 @@ describe("<RoomTopic/>", () => {
expect(window.location.href).toEqual(expectedHref);
expect(dis.fire).toHaveBeenCalledWith(Action.ShowRoomTopic);
});
it("should open the tooltip when hovering a text", async () => {
const topic = "room topic";
renderRoom(topic);
await userEvent.hover(screen.getByText(topic));
await waitFor(() => expect(screen.getByRole("tooltip", { name: "Click to read topic" })).toBeInTheDocument());
});
it("should not open the tooltip when hovering a link", async () => {
const topic = "https://matrix.org";
renderRoom(topic);
await userEvent.hover(screen.getByText(topic));
await waitFor(() => expect(screen.queryByRole("tooltip", { name: "Click to read topic" })).toBeNull());
});
});

82
test/components/views/elements/TooltipTarget-test.tsx
View file

@ -1,82 +0,0 @@
/*
Copyright 2022 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import { fireEvent, render } from "@testing-library/react";
import { Alignment } from "../../../../src/components/views/elements/Tooltip";
import TooltipTarget from "../../../../src/components/views/elements/TooltipTarget";
describe("<TooltipTarget />", () => {
const defaultProps = {
"tooltipTargetClassName": "test tooltipTargetClassName",
"className": "test className",
"tooltipClassName": "test tooltipClassName",
"label": "test label",
"alignment": Alignment.Left,
"id": "test id",
"data-testid": "test",
};
const getComponent = (props = {}) => {
const wrapper = render(
// wrap in element so renderIntoDocument can render functional component
<span>
<TooltipTarget {...defaultProps} {...props}>
<span>child</span>
</TooltipTarget>
</span>,
);
return wrapper.getByTestId("test");
};
const getVisibleTooltip = () => document.querySelector(".mx_Tooltip.mx_Tooltip_visible");
it("renders container", () => {
const component = getComponent();
expect(component).toMatchSnapshot();
expect(getVisibleTooltip()).toBeFalsy();
});
const alignmentKeys = Object.keys(Alignment).filter((o: any) => isNaN(o));
it.each(alignmentKeys)("displays %s aligned tooltip on mouseover", async (alignment: any) => {
const wrapper = getComponent({ alignment: Alignment[alignment] })!;
fireEvent.mouseOver(wrapper);
expect(getVisibleTooltip()).toMatchSnapshot();
});
it("hides tooltip on mouseleave", () => {
const wrapper = getComponent()!;
fireEvent.mouseOver(wrapper);
expect(getVisibleTooltip()).toBeTruthy();
fireEvent.mouseLeave(wrapper);
expect(getVisibleTooltip()).toBeFalsy();
});
it("displays tooltip on focus", () => {
const wrapper = getComponent()!;
fireEvent.focus(wrapper);
expect(getVisibleTooltip()).toBeTruthy();
});
it("hides tooltip on blur", async () => {
const wrapper = getComponent()!;
fireEvent.focus(wrapper);
expect(getVisibleTooltip()).toBeTruthy();
fireEvent.blur(wrapper);
expect(getVisibleTooltip()).toBeFalsy();
});
});

2
test/components/views/elements/__snapshots__/AppTile-test.tsx.snap
View file

@ -288,9 +288,7 @@ exports[`AppTile for a pinned widget should render permission request 1`] = `
<span>
Using this widget may share data
<div
aria-describedby="mx_TooltipTarget_vY7Q4uEh"
class="mx_TextWithTooltip_target mx_TextWithTooltip_target--helpIcon"
tabindex="0"
>
<div
class="mx_Icon mx_Icon_12"

112
test/components/views/elements/__snapshots__/TooltipTarget-test.tsx.snap
View file

@ -1,112 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<TooltipTarget /> displays Bottom aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
id="test id"
role="tooltip"
style="display: block; top: 6px; transform: translate(max(10px, min(calc(0px - 50%), calc(100vw - 100% - 10px))));"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> displays InnerBottom aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
id="test id"
role="tooltip"
style="display: block; top: -50px; transform: translate(max(10px, min(calc(0px - 50%), calc(100vw - 100% - 10px))));"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> displays Left aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
id="test id"
role="tooltip"
style="display: block; right: 1030px; top: 0px; transform: translateY(-50%);"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> displays Natural aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
id="test id"
role="tooltip"
style="display: block; left: 6px; top: 0px; transform: translateY(-50%);"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> displays Right aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
id="test id"
role="tooltip"
style="display: block; left: 6px; top: 0px; transform: translateY(-50%);"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> displays Top aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
id="test id"
role="tooltip"
style="display: block; top: -6px; transform: translate(max(10px, min(calc(0px - 50%), calc(100vw - 100% - 10px))), -100%);"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> displays TopRight aligned tooltip on mouseover 1`] = `
<div
class="mx_Tooltip test tooltipClassName mx_Tooltip_visible"
id="test id"
role="tooltip"
style="display: block; top: -6px; right: 1024px; transform: translateY(-100%);"
>
<div
class="mx_Tooltip_chevron"
/>
test label
</div>
`;
exports[`<TooltipTarget /> renders container 1`] = `
<div
aria-describedby="test id"
class="test tooltipTargetClassName"
data-testid="test"
tabindex="0"
>
<span>
child
</span>
</div>
`;

6
test/components/views/messages/__snapshots__/MLocationBody-test.tsx.snap
View file

@ -34,8 +34,7 @@ exports[`MLocationBody <MLocationBody> without error renders map correctly 1`] =
class="mx_MLocationBody"
>
<div
aria-describedby="mx_TooltipTarget_9K38QgU2"
tabindex="0"
class="mx_MLocationBody_map"
>
<div
class="mx_Map mx_MLocationBody_map"
@ -67,8 +66,7 @@ exports[`MLocationBody <MLocationBody> without error renders marker correctly fo
class="mx_MLocationBody"
>
<div
aria-describedby="mx_TooltipTarget_9K38QgU2"
tabindex="0"
class="mx_MLocationBody_map"
>
<div
class="mx_Map mx_MLocationBody_map"