hendrik/lens
1
0
Fork 0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00
Code Issues Projects Releases Wiki Activity

Fix Tooltip not showing when switching hotbars

Browse Source 
Signed-off-by: Sebastian Malton <sebastian@malton.name>
This commit is contained in:
Sebastian Malton 2022-05-31 13:55:38 -04:00
parent f12851ff3b
commit 86f6afc0c1
3 changed files with 121 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/renderer/components/tooltip/__snapshots__/tooltip.test.tsx.snap Normal file
View File

@ -0,0 +1,50 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Tooltip /> does not render to DOM if not visibile 1`] = `
<body>
<div>
<div
id="my-target"
>
Target Text
</div>
</div>
</body>
`;
exports[`<Tooltip /> renders to DOM when forced to by visibile prop 1`] = `
<body>
<div>
<div
class="Tooltip visible"
role="tooltip"
>
I am a tooltip
</div>
<div
id="my-target"
>
Target Text
</div>
</div>
</body>
`;
exports[`<Tooltip /> renders to DOM when hovering over target 1`] = `
<body>
<div>
<div
class="Tooltip right"
role="tooltip"
style="left: 10px; top: 0px;"
>
I am a tooltip
</div>
<div
id="my-target"
>
Target Text
</div>
</div>
</body>
`;

63
src/renderer/components/tooltip/tooltip.test.tsx Normal file
View File

@ -0,0 +1,63 @@
/**
* Copyright (c) OpenLens Authors. All rights reserved.
* Licensed under MIT License. See LICENSE in root directory for more information.
*/
import { render } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import assert from "assert";
import React from "react";
import { Tooltip } from "./tooltip";
describe("<Tooltip />", () => {
it("does not render to DOM if not visibile", () => {
const result = render((
<>
<Tooltip targetId="my-target" usePortal={false}>I am a tooltip</Tooltip>
<div id="my-target">Target Text</div>
</>
));
expect(result.baseElement).toMatchSnapshot();
});
it("renders to DOM when hovering over target", () => {
const result = render((
<>
<Tooltip
targetId="my-target"
data-testid="tooltip"
usePortal={false}
>
I am a tooltip
</Tooltip>
<div id="my-target">Target Text</div>
</>
));
const target = result.baseElement.querySelector("#my-target");
assert(target);
userEvent.hover(target);
expect(result.baseElement).toMatchSnapshot();
});
it("renders to DOM when forced to by visibile prop", () => {
const result = render((
<>
<Tooltip
targetId="my-target"
data-testid="tooltip"
visible={true}
usePortal={false}
>
I am a tooltip
</Tooltip>
<div id="my-target">Target Text</div>
</>
));
expect(result.baseElement).toMatchSnapshot();
});
});

12
src/renderer/components/tooltip/tooltip.tsx
View File

@ -10,7 +10,7 @@ import { createPortal } from "react-dom";
import { observer } from "mobx-react";
import type { IClassName } from "../../utils";
import { cssNames, autoBind } from "../../utils";
import { observable, makeObservable, action } from "mobx";
import { observable, makeObservable, action, computed } from "mobx";
export enum TooltipPosition {
TOP = "top",
@ -55,7 +55,7 @@ export class Tooltip extends React.Component<TooltipProps> {
@observable.ref elem: HTMLDivElement | null = null;
@observable activePosition?: TooltipPosition;
@observable isVisible = this.props.visible ?? false;
@observable isVisible = false;
@observable isContentVisible = false; // animation manager
constructor(props: TooltipProps) {
@ -64,6 +64,10 @@ export class Tooltip extends React.Component<TooltipProps> {
autoBind(this);
}
@computed get renderToDOM() {
return this.props.visible ?? this.isVisible;
}
get targetElem(): HTMLElement | null {
return document.getElementById(this.props.targetId);
}
@ -217,13 +221,13 @@ export class Tooltip extends React.Component<TooltipProps> {
}
render() {
if (!this.isVisible) {
if (!this.renderToDOM) {
return null;
}
const { style, formatters, usePortal, children } = this.props;
const className = cssNames("Tooltip", this.props.className, formatters, this.activePosition, {
visible: this.isContentVisible,
visible: this.isContentVisible || this.props.visible,
formatter: !!formatters,
});
const tooltip = (