Switch Pill & E2EIcon to using Compound Tooltips (#12080)
* Switch Pill to using Compound Tooltips Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Switch E2EIcon to using Compound Tooltips Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update tests & snapshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
GitHub
parent
42ac2272b2
commit
07747e24d4
10 changed files with 105 additions and 129 deletions
|
|
@ -14,13 +14,13 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { ReactElement, useRef, useState } from "react";
|
||||
import React, { ReactElement } from "react";
|
||||
import classNames from "classnames";
|
||||
import { Room, RoomMember } from "matrix-js-sdk/src/matrix";
|
||||
import { Tooltip } from "@vector-im/compound-web";
|
||||
|
||||
import { MatrixClientPeg } from "../../../MatrixClientPeg";
|
||||
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
||||
import Tooltip, { Alignment } from "../elements/Tooltip";
|
||||
import { usePermalink } from "../../../hooks/usePermalink";
|
||||
import RoomAvatar from "../avatars/RoomAvatar";
|
||||
import MemberAvatar from "../avatars/MemberAvatar";
|
||||
|
|
@ -88,8 +88,6 @@ export interface PillProps {
|
|||
}
|
||||
|
||||
export const Pill: React.FC<PillProps> = ({ type: propType, url, inMessage, room, shouldShowPillAvatar = true }) => {
|
||||
const tooltipId = useRef(`mx_Pill_${Math.random()}`).current;
|
||||
const [hover, setHover] = useState(false);
|
||||
const { event, member, onClick, resourceId, targetRoom, text, type } = usePermalink({
|
||||
room,
|
||||
type: propType,
|
||||
|
|
@ -109,15 +107,6 @@ export const Pill: React.FC<PillProps> = ({ type: propType, url, inMessage, room
|
|||
mx_EventPill: type === PillType.EventInOtherRoom || type === PillType.EventInSameRoom,
|
||||
});
|
||||
|
||||
const onMouseOver = (): void => {
|
||||
setHover(true);
|
||||
};
|
||||
|
||||
const onMouseLeave = (): void => {
|
||||
setHover(false);
|
||||
};
|
||||
|
||||
const tip = hover && resourceId ? <Tooltip id={tooltipId} label={resourceId} alignment={Alignment.Right} /> : null;
|
||||
let avatar: ReactElement | null = null;
|
||||
let pillText: string | null = text;
|
||||
|
||||
|
|
@ -155,34 +144,28 @@ export const Pill: React.FC<PillProps> = ({ type: propType, url, inMessage, room
|
|||
return null;
|
||||
}
|
||||
|
||||
const isAnchor = !!inMessage && !!url;
|
||||
return (
|
||||
<bdi>
|
||||
<MatrixClientContext.Provider value={MatrixClientPeg.safeGet()}>
|
||||
{inMessage && url ? (
|
||||
<a
|
||||
className={classes}
|
||||
href={url}
|
||||
onClick={onClick}
|
||||
onMouseOver={onMouseOver}
|
||||
onMouseLeave={onMouseLeave}
|
||||
aria-describedby={tooltipId}
|
||||
>
|
||||
{avatar}
|
||||
<span className="mx_Pill_text">{pillText}</span>
|
||||
{tip}
|
||||
</a>
|
||||
) : (
|
||||
<span
|
||||
className={classes}
|
||||
onMouseOver={onMouseOver}
|
||||
onMouseLeave={onMouseLeave}
|
||||
aria-describedby={tooltipId}
|
||||
>
|
||||
{avatar}
|
||||
<span className="mx_Pill_text">{pillText}</span>
|
||||
{tip}
|
||||
</span>
|
||||
)}
|
||||
<Tooltip
|
||||
label={resourceId ?? ""}
|
||||
open={resourceId ? undefined : false}
|
||||
side="right"
|
||||
isTriggerInteractive={isAnchor}
|
||||
>
|
||||
{isAnchor ? (
|
||||
<a className={classes} href={url} onClick={onClick}>
|
||||
{avatar}
|
||||
<span className="mx_Pill_text">{pillText}</span>
|
||||
</a>
|
||||
) : (
|
||||
<span className={classes}>
|
||||
{avatar}
|
||||
<span className="mx_Pill_text">{pillText}</span>
|
||||
</span>
|
||||
)}
|
||||
</Tooltip>
|
||||
</MatrixClientContext.Provider>
|
||||
</bdi>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -15,12 +15,12 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { CSSProperties, useState } from "react";
|
||||
import React, { ComponentProps, CSSProperties } from "react";
|
||||
import classNames from "classnames";
|
||||
import { Tooltip } from "@vector-im/compound-web";
|
||||
|
||||
import { _t, _td, TranslationKey } from "../../../languageHandler";
|
||||
import AccessibleButton from "../elements/AccessibleButton";
|
||||
import Tooltip, { Alignment } from "../elements/Tooltip";
|
||||
import { E2EStatus } from "../../../utils/ShieldUtils";
|
||||
import { XOR } from "../../../@types/common";
|
||||
|
||||
|
|
@ -48,7 +48,7 @@ interface Props {
|
|||
size?: number;
|
||||
onClick?: () => void;
|
||||
hideTooltip?: boolean;
|
||||
tooltipAlignment?: Alignment;
|
||||
tooltipSide?: ComponentProps<typeof Tooltip>["side"];
|
||||
bordered?: boolean;
|
||||
}
|
||||
|
||||
|
|
@ -69,11 +69,9 @@ const E2EIcon: React.FC<XOR<UserProps, RoomProps>> = ({
|
|||
size,
|
||||
onClick,
|
||||
hideTooltip,
|
||||
tooltipAlignment,
|
||||
tooltipSide,
|
||||
bordered,
|
||||
}) => {
|
||||
const [hover, setHover] = useState(false);
|
||||
|
||||
const classes = classNames(
|
||||
{
|
||||
mx_E2EIcon: true,
|
||||
|
|
@ -97,35 +95,23 @@ const E2EIcon: React.FC<XOR<UserProps, RoomProps>> = ({
|
|||
style = { width: `${size}px`, height: `${size}px` };
|
||||
}
|
||||
|
||||
const onMouseOver = (): void => setHover(true);
|
||||
const onMouseLeave = (): void => setHover(false);
|
||||
|
||||
const label = e2eTitle ? _t(e2eTitle) : "";
|
||||
|
||||
let tip: JSX.Element | undefined;
|
||||
if (hover && !hideTooltip && label) {
|
||||
tip = <Tooltip label={label} alignment={tooltipAlignment} />;
|
||||
let content: JSX.Element;
|
||||
if (onClick) {
|
||||
content = <AccessibleButton onClick={onClick} className={classes} style={style} />;
|
||||
} else {
|
||||
content = <div className={classes} style={style} />;
|
||||
}
|
||||
|
||||
if (onClick) {
|
||||
return (
|
||||
<AccessibleButton
|
||||
onClick={onClick}
|
||||
onMouseOver={onMouseOver}
|
||||
onMouseLeave={onMouseLeave}
|
||||
className={classes}
|
||||
style={style}
|
||||
aria-label={label}
|
||||
>
|
||||
{tip}
|
||||
</AccessibleButton>
|
||||
);
|
||||
if (!e2eTitle || hideTooltip) {
|
||||
return content;
|
||||
}
|
||||
|
||||
return (
|
||||
<div onMouseOver={onMouseOver} onMouseLeave={onMouseLeave} className={classes} style={style} aria-label={label}>
|
||||
{tip}
|
||||
</div>
|
||||
<Tooltip label={label} side={tooltipSide} isTriggerInteractive={!!onClick}>
|
||||
{content}
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -780,11 +780,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}
|
||||
tooltipAlignment={Alignment.Bottom}
|
||||
/>
|
||||
<E2EIcon className="mx_LegacyRoomHeader_icon" status={this.props.e2eStatus} tooltipSide="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() ? (
|
||||
|
|
|
|||
|
|
@ -522,10 +522,14 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
aria-label="This room is end-to-end encrypted"
|
||||
class="mx_E2EIcon mx_E2EIcon_normal mx_LegacyRoomHeader_icon"
|
||||
/>
|
||||
<span
|
||||
data-state="closed"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="mx_E2EIcon mx_E2EIcon_normal mx_LegacyRoomHeader_icon"
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="mx_LegacyRoomHeader_name mx_LegacyRoomHeader_name--textonly"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -142,8 +142,8 @@ describe("<Pill>", () => {
|
|||
await userEvent.hover(screen.getByText("Room 1"));
|
||||
});
|
||||
|
||||
it("should show a tooltip with the room Id", () => {
|
||||
expect(screen.getByRole("tooltip", { name: room1Id })).toBeInTheDocument();
|
||||
it("should show a tooltip with the room Id", async () => {
|
||||
expect(await screen.findByRole("tooltip", { name: room1Id })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
describe("when not hovering the pill any more", () => {
|
||||
|
|
|
|||
|
|
@ -11,13 +11,17 @@ exports[`<Pill> should not render an avatar or link when called with inMessage =
|
|||
<div>
|
||||
<bdi>
|
||||
<span
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_RoomPill"
|
||||
data-state="closed"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="mx_Pill_text"
|
||||
class="mx_Pill mx_RoomPill"
|
||||
>
|
||||
Room 1
|
||||
<span
|
||||
class="mx_Pill_text"
|
||||
>
|
||||
Room 1
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</bdi>
|
||||
|
|
@ -30,24 +34,28 @@ exports[`<Pill> should render the expected pill for @room 1`] = `
|
|||
<div>
|
||||
<bdi>
|
||||
<span
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_AtRoomPill"
|
||||
data-state="closed"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
|
||||
data-color="3"
|
||||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 16px;"
|
||||
class="mx_Pill mx_AtRoomPill"
|
||||
>
|
||||
R
|
||||
</span>
|
||||
<span
|
||||
class="mx_Pill_text"
|
||||
>
|
||||
@room
|
||||
<span
|
||||
aria-hidden="true"
|
||||
class="_avatar_1o69u_17 mx_BaseAvatar _avatar-imageless_1o69u_60"
|
||||
data-color="3"
|
||||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 16px;"
|
||||
>
|
||||
R
|
||||
</span>
|
||||
<span
|
||||
class="mx_Pill_text"
|
||||
>
|
||||
@room
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</bdi>
|
||||
|
|
@ -60,8 +68,8 @@ exports[`<Pill> should render the expected pill for a known user not in the room
|
|||
<div>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_UserPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/@user2:example.com"
|
||||
>
|
||||
<span
|
||||
|
|
@ -91,8 +99,8 @@ exports[`<Pill> should render the expected pill for a message in another room 1`
|
|||
<div>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_EventPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/!room1:example.com/$123-456"
|
||||
>
|
||||
<span
|
||||
|
|
@ -122,8 +130,8 @@ exports[`<Pill> should render the expected pill for a message in the same room 1
|
|||
<div>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_EventPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/!room1:example.com/$123-456"
|
||||
>
|
||||
<span
|
||||
|
|
@ -153,8 +161,8 @@ exports[`<Pill> should render the expected pill for a room alias 1`] = `
|
|||
<div>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_RoomPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/#room1:example.com"
|
||||
>
|
||||
<span
|
||||
|
|
@ -184,8 +192,8 @@ exports[`<Pill> should render the expected pill for a space 1`] = `
|
|||
<div>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_RoomPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/!space1:example.com"
|
||||
>
|
||||
<span
|
||||
|
|
@ -215,8 +223,8 @@ exports[`<Pill> should render the expected pill for an uknown user not in the ro
|
|||
<div>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_UserPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/@user3:example.com"
|
||||
>
|
||||
<div
|
||||
|
|
@ -238,8 +246,8 @@ exports[`<Pill> when rendering a pill for a room should render the expected pill
|
|||
<div>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_RoomPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/!room1:example.com"
|
||||
>
|
||||
<span
|
||||
|
|
@ -269,8 +277,8 @@ exports[`<Pill> when rendering a pill for a user in the room should render as ex
|
|||
<div>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_UserPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/@user1:example.com"
|
||||
>
|
||||
<span
|
||||
|
|
|
|||
|
|
@ -199,7 +199,7 @@ describe("<TextualBody />", () => {
|
|||
const { container } = getComponent({ mxEvent: ev });
|
||||
const content = container.querySelector(".mx_EventTile_body");
|
||||
expect(content.innerHTML).toMatchInlineSnapshot(
|
||||
`"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com" aria-describedby="mx_Pill_0.123456"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_1o69u_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_1o69u_49" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
|
||||
`"Chat with <span><bdi><a class="mx_Pill mx_UserPill mx_UserPill_me" href="https://matrix.to/#/@user:example.com" data-state="closed"><span aria-label="Profile picture" aria-hidden="true" data-testid="avatar-img" data-type="round" data-color="8" class="_avatar_1o69u_17 mx_BaseAvatar" style="--cpd-avatar-size: 16px;"><img loading="lazy" alt="" src="mxc://avatar.url/image.png" crossorigin="anonymous" referrerpolicy="no-referrer" class="_image_1o69u_49" data-type="round" width="16px" height="16px"></span><span class="mx_Pill_text">Member</span></a></bdi></span>"`,
|
||||
);
|
||||
});
|
||||
|
||||
|
|
@ -217,7 +217,7 @@ describe("<TextualBody />", () => {
|
|||
const { container } = getComponent({ mxEvent: ev });
|
||||
const content = container.querySelector(".mx_EventTile_body");
|
||||
expect(content.innerHTML).toMatchInlineSnapshot(
|
||||
`"Visit <span><bdi><a class="mx_Pill mx_RoomPill" href="https://matrix.to/#/#room:example.com" aria-describedby="mx_Pill_0.123456"><div class="mx_Pill_LinkIcon mx_BaseAvatar"></div><span class="mx_Pill_text">#room:example.com</span></a></bdi></span>"`,
|
||||
`"Visit <span><bdi><a class="mx_Pill mx_RoomPill" href="https://matrix.to/#/#room:example.com" data-state="closed"><div class="mx_Pill_LinkIcon mx_BaseAvatar"></div><span class="mx_Pill_text">#room:example.com</span></a></bdi></span>"`,
|
||||
);
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -50,8 +50,8 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for an
|
|||
<span>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_UserPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/@user:example.com"
|
||||
>
|
||||
<span
|
||||
|
|
@ -99,8 +99,8 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for eve
|
|||
<span>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_EventPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com/$16085560162aNpaH:example.com?via=example.com"
|
||||
>
|
||||
<span
|
||||
|
|
@ -150,8 +150,8 @@ exports[`<TextualBody /> renders formatted m.text correctly pills appear for roo
|
|||
<span>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_RoomPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/!ZxbRYPQXDXKGmDnJNg:example.com?via=example.com&via=bob.com"
|
||||
>
|
||||
<span
|
||||
|
|
@ -260,8 +260,8 @@ exports[`<TextualBody /> renders formatted m.text correctly pills get injected c
|
|||
<span>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_UserPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/@user:server"
|
||||
>
|
||||
<span
|
||||
|
|
@ -303,7 +303,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
|
|||
><a
|
||||
class="mx_Pill mx_EventPill"
|
||||
href="https://matrix.to/#/!room1:example.com/%event_id%"
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
data-state="closed"
|
||||
><span
|
||||
aria-label="Profile picture"
|
||||
aria-hidden="true"
|
||||
|
|
@ -336,7 +336,7 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
|
|||
><a
|
||||
class="mx_Pill mx_EventPill"
|
||||
href="https://matrix.to/#/!room2:example.com/%event_id%"
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
data-state="closed"
|
||||
><span
|
||||
aria-label="Avatar"
|
||||
aria-hidden="true"
|
||||
|
|
@ -371,8 +371,8 @@ exports[`<TextualBody /> renders plain-text m.text correctly should pillify a pe
|
|||
<span>
|
||||
<bdi>
|
||||
<a
|
||||
aria-describedby="mx_Pill_0.123456"
|
||||
class="mx_Pill mx_EventPill"
|
||||
data-state="closed"
|
||||
href="https://matrix.to/#/!room1:example.com/!abc123"
|
||||
>
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import { render, screen, waitFor } from "@testing-library/react";
|
|||
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 * as TestUtils from "../../../test-utils";
|
||||
import MemberTile from "../../../../src/components/views/rooms/MemberTile";
|
||||
|
|
@ -48,10 +49,13 @@ describe("MemberTile", () => {
|
|||
|
||||
const { container } = render(<MemberTile member={member} />);
|
||||
|
||||
await waitFor(() =>
|
||||
expect(screen.getByLabelText("This user has not verified all of their sessions.")).toBeInTheDocument(),
|
||||
);
|
||||
expect(container).toMatchSnapshot();
|
||||
await waitFor(async () => {
|
||||
await userEvent.hover(container.querySelector(".mx_E2EIcon")!);
|
||||
expect(
|
||||
screen.getByRole("tooltip", { name: "This user has not verified all of their sessions." }),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
it("should display an verified E2EIcon when the e2E status = Verified", async () => {
|
||||
|
|
@ -69,11 +73,14 @@ describe("MemberTile", () => {
|
|||
|
||||
const { container } = render(<MemberTile member={member} />);
|
||||
|
||||
await waitFor(() =>
|
||||
expect(
|
||||
screen.getByLabelText("You have verified this user. This user has verified all of their sessions."),
|
||||
).toBeInTheDocument(),
|
||||
);
|
||||
expect(container).toMatchSnapshot();
|
||||
await waitFor(async () => {
|
||||
await userEvent.hover(container.querySelector(".mx_E2EIcon")!);
|
||||
expect(
|
||||
screen.getByRole("tooltip", {
|
||||
name: "You have verified this user. This user has verified all of their sessions.",
|
||||
}),
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -24,10 +24,6 @@ exports[`MemberTile should display an verified E2EIcon when the e2E status = Ver
|
|||
>
|
||||
u
|
||||
</span>
|
||||
<div
|
||||
aria-label="You have verified this user. This user has verified all of their sessions."
|
||||
class="mx_E2EIcon mx_E2EIcon_bordered mx_E2EIcon_verified"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_EntityTile_details"
|
||||
|
|
@ -81,10 +77,6 @@ exports[`MemberTile should display an warning E2EIcon when the e2E status = Warn
|
|||
>
|
||||
u
|
||||
</span>
|
||||
<div
|
||||
aria-label="This user has not verified all of their sessions."
|
||||
class="mx_E2EIcon mx_E2EIcon_bordered mx_E2EIcon_warning"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx_EntityTile_details"
|
||||
|
|
|
|||
Loading…
Reference in a new issue