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

Commit

Permalink
Fix wrong room topic tooltip position (#10667)
Browse files Browse the repository at this point in the history
* Fix wrong room topic tooltip position

* Update snapshots

* Fix tests
  • Loading branch information
t3chguy authored Apr 20, 2023
1 parent 93b4ee6 commit 1efa829
Show file tree
Hide file tree
Showing 5 changed files with 101 additions and 97 deletions.
17 changes: 12 additions & 5 deletions src/components/views/elements/RoomTopic.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -103,10 +103,17 @@ export default function RoomTopic({ room, ...props }: IProps): JSX.Element {
const className = classNames(props.className, "mx_RoomTopic");

return (
<div {...props} ref={ref} onClick={onClick} dir="auto" className={className}>
<TooltipTarget label={_t("Click to read topic")} alignment={Alignment.Bottom} ignoreHover={ignoreHover}>
<Linkify>{body}</Linkify>
</TooltipTarget>
</div>
<TooltipTarget
{...props}
ref={ref}
onClick={onClick}
dir="auto"
tooltipTargetClassName={className}
label={_t("Click to read topic")}
alignment={Alignment.Bottom}
ignoreHover={ignoreHover}
>
<Linkify>{body}</Linkify>
</TooltipTarget>
);
}
92 changes: 49 additions & 43 deletions src/components/views/elements/TooltipTarget.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

import React, { HTMLAttributes } from "react";
import React, { forwardRef, HTMLAttributes } from "react";

import useFocus from "../../../hooks/useFocus";
import useHover from "../../../hooks/useHover";
Expand All @@ -29,49 +29,55 @@ interface IProps extends HTMLAttributes<HTMLSpanElement>, Omit<ITooltipProps, "v
* Generic tooltip target element that handles tooltip visibility state
* and displays children
*/
const TooltipTarget: React.FC<IProps> = ({
children,
tooltipTargetClassName,
// tooltip pass through props
className,
id,
label,
alignment,
tooltipClassName,
maxParentWidth,
ignoreHover,
...rest
}) => {
const [isFocused, focusProps] = useFocus();
const [isHovering, hoverProps] = useHover(ignoreHover || (() => false));
const TooltipTarget = forwardRef<HTMLDivElement, IProps>(
(
{
children,
tooltipTargetClassName,
// tooltip pass through props
className,
id,
label,
alignment,
tooltipClassName,
maxParentWidth,
ignoreHover,
...rest
},
ref,
) => {
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}
/>
);
// 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}
>
{children}
{tooltip}
</div>
);
};
return (
<div
{...hoverProps}
{...focusProps}
tabIndex={0}
aria-describedby={id}
className={tooltipTargetClassName}
{...rest}
ref={ref}
>
{children}
{tooltip}
</div>
);
},
);

export default TooltipTarget;
31 changes: 17 additions & 14 deletions test/PosthogAnalytics-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -52,24 +52,27 @@ describe("PosthogAnalytics", () => {
beforeEach(() => {
fakePosthog = getFakePosthog();

window.crypto = {
subtle: {
digest: async (_: AlgorithmIdentifier, encodedMessage: BufferSource) => {
const message = new TextDecoder().decode(encodedMessage);
const hexHash = shaHashes[message];
const bytes: number[] = [];
for (let c = 0; c < hexHash.length; c += 2) {
bytes.push(parseInt(hexHash.slice(c, c + 2), 16));
}
return bytes as unknown as ArrayBuffer;
Object.defineProperty(window, "crypto", {
value: {
subtle: {
digest: async (_: AlgorithmIdentifier, encodedMessage: BufferSource) => {
const message = new TextDecoder().decode(encodedMessage);
const hexHash = shaHashes[message];
const bytes: number[] = [];
for (let c = 0; c < hexHash.length; c += 2) {
bytes.push(parseInt(hexHash.slice(c, c + 2), 16));
}
return bytes;
},
},
} as unknown as SubtleCrypto,
} as unknown as Crypto;
},
});
});

afterEach(() => {
// @ts-ignore
window.crypto = null;
Object.defineProperty(window, "crypto", {
value: null,
});
SdkConfig.unset(); // we touch the config, so clean up
});

Expand Down
44 changes: 16 additions & 28 deletions test/components/structures/__snapshots__/RoomView-test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -55,14 +55,11 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
<div
class="mx_RoomHeader_topic mx_RoomTopic"
dir="auto"
tabindex="0"
>
<div
tabindex="0"
>
<span
dir="auto"
/>
</div>
<span
dir="auto"
/>
</div>
</div>
</header>
Expand Down Expand Up @@ -149,14 +146,11 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
<div
class="mx_RoomHeader_topic mx_RoomTopic"
dir="auto"
tabindex="0"
>
<div
tabindex="0"
>
<span
dir="auto"
/>
</div>
<span
dir="auto"
/>
</div>
</div>
</header>
Expand Down Expand Up @@ -339,14 +333,11 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
<div
class="mx_RoomHeader_topic mx_RoomTopic"
dir="auto"
tabindex="0"
>
<div
tabindex="0"
>
<span
dir="auto"
/>
</div>
<span
dir="auto"
/>
</div>
</div>
</header>
Expand Down Expand Up @@ -606,14 +597,11 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
<div
class="mx_RoomHeader_topic mx_RoomTopic"
dir="auto"
tabindex="0"
>
<div
tabindex="0"
>
<span
dir="auto"
/>
</div>
<span
dir="auto"
/>
</div>
</div>
</header>
Expand Down
14 changes: 7 additions & 7 deletions test/utils/MegolmExportEncryption-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -75,13 +75,13 @@ describe("MegolmExportEncryption", function () {
let MegolmExportEncryption: typeof MegolmExportEncryptionExport;

beforeEach(() => {
window.crypto = {
getRandomValues,
randomUUID: jest.fn().mockReturnValue("not-random-uuid"),
subtle: webCrypto.subtle,
};
// @ts-ignore for some reason including it in the object above gets ignored
window.crypto.subtle = webCrypto.subtle;
Object.defineProperty(window, "crypto", {
value: {
getRandomValues,
randomUUID: jest.fn().mockReturnValue("not-random-uuid"),
subtle: webCrypto.subtle,
},
});
MegolmExportEncryption = require("../../src/utils/MegolmExportEncryption");
});

Expand Down

0 comments on commit 1efa829

Please sign in to comment.