github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-21 04:33:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): use react-popper-tooltip instead of react-tippy

Browse Source
This commit is contained in:
Łukasz Mierzwa
2020-05-14 10:12:51 +01:00
committed by Łukasz Mierzwa
parent 5750fe1c04
commit 80bbc58090
20 changed files with 180 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
ui/src/Components/AlertAck/index.js
View File

@@ -183,10 +183,9 @@ const AlertAck = ({ alertStore, silenceFormStore, group }) => {
return useObserver(() =>
alertStore.settings.values.alertAcknowledgement.enabled === false ? null : (
<TooltipWrapper
html={submitState.isFailed ? submitState.errorMessages[0] : null}
title={
submitState.isFailed
? null
? submitState.errorMessages[0]
: "Acknowledge this alert with a short lived silence"
}
>

63
ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap
View File

@@ -4,11 +4,8 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
"
<li class=\\"components-grid-alertgrid-alertgroup-alert list-group-item bg-transparent pl-1 pr-0 py-0 my-1 rounded-0 border-left-1 border-right-0 border-top-0 border-bottom-0 border-danger\\">
<div>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-5\\"
data-original-title=\\"Click the icon to hide annotation value\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
<span class=\\"cursor-pointer\\">
@@ -37,11 +34,8 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
</span>
</div>
</div>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-6\\"
data-original-title=\\"Click to show annotation value\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
<svg aria-hidden=\\"true\\"
@@ -84,11 +78,8 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
a day ago
</time>
</span>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-7\\"
data-original-title=\\"This alert is inhibited by other alerts\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<span class=\\"badge badge-light components-label\\">
<svg aria-hidden=\\"true\\"
@@ -107,11 +98,8 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
</svg>
</span>
</div>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-8\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">
@@ -122,11 +110,8 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
</span>
</span>
</div>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-9\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">
@@ -166,11 +151,8 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
"
<li class=\\"components-grid-alertgrid-alertgroup-alert list-group-item bg-transparent pl-1 pr-0 py-0 my-1 rounded-0 border-left-1 border-right-0 border-top-0 border-bottom-0 border-danger\\">
<div>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-1\\"
data-original-title=\\"Click the icon to hide annotation value\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
<span class=\\"cursor-pointer\\">
@@ -199,11 +181,8 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
</span>
</div>
</div>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-2\\"
data-original-title=\\"Click to show annotation value\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
<svg aria-hidden=\\"true\\"
@@ -246,11 +225,8 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
a day ago
</time>
</span>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-3\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">
@@ -261,11 +237,8 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
</span>
</span>
</div>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-4\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">

10
ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap
View File

@@ -28,9 +28,8 @@ exports[`<RenderLinkAnnotation /> matches snapshot 1`] = `
exports[`<RenderNonLinkAnnotation /> matches snapshot when visible=false 1`] = `
"
<div title=\\"Click to show annotation value\\"
class
style=\\"display:inline-block;max-width:100%\\"
<div style=\\"display:inline-block;max-width:100%\\"
class=\\" tooltip-trigger\\"
>
<div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
<svg aria-hidden=\\"true\\"
@@ -55,9 +54,8 @@ exports[`<RenderNonLinkAnnotation /> matches snapshot when visible=false 1`] = `
exports[`<RenderNonLinkAnnotation /> matches snapshot when visible=true 1`] = `
"
<div title=\\"Click the icon to hide annotation value\\"
class
style=\\"display:inline-block;max-width:100%\\"
<div style=\\"display:inline-block;max-width:100%\\"
class=\\" tooltip-trigger\\"
>
<div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
<span class=\\"cursor-pointer\\">

84
ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
View File

@@ -4,11 +4,8 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
"
<div class=\\"card-footer components-grid-alertgrid-alertgroup-footer px-2 py-1\\">
<div class=\\"mb-1\\">
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-1\\"
data-original-title=\\"Click the icon to hide annotation value\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
<span class=\\"cursor-pointer\\">
@@ -37,11 +34,8 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
</span>
</div>
</div>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-2\\"
data-original-title=\\"Click to show annotation value\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
<svg aria-hidden=\\"true\\"
@@ -62,11 +56,8 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
</div>
</div>
</div>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-3\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">
@@ -77,11 +68,8 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
</span>
</span>
</div>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-4\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">
@@ -92,11 +80,8 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
</span>
</span>
</div>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-5\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">
@@ -107,11 +92,8 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
</span>
</span>
</div>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-6\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">
@@ -151,11 +133,8 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
"
<div class=\\"card-footer components-grid-alertgrid-alertgroup-footer px-2 py-1\\">
<div class=\\"mb-1\\">
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-25\\"
data-original-title=\\"Click the icon to hide annotation value\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
<span class=\\"cursor-pointer\\">
@@ -184,11 +163,8 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
</span>
</div>
</div>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-26\\"
data-original-title=\\"Click to show annotation value\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100 cursor-pointer\\">
<svg aria-hidden=\\"true\\"
@@ -209,11 +185,8 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
</div>
</div>
</div>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-27\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">
@@ -224,11 +197,8 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
</span>
</span>
</div>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-28\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">
@@ -239,11 +209,8 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
</span>
</span>
</div>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-29\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">
@@ -254,11 +221,8 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
</span>
</span>
</div>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-30\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">

7
ui/src/Components/Labels/FilteringLabel/__snapshots__/index.test.js.snap
View File

@@ -2,11 +2,8 @@
exports[`<FilteringLabel /> matches snapshot 1`] = `
"
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-1\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
<span class=\\"components-label-name\\">

6
ui/src/Components/MainModal/index.js
View File

@@ -38,7 +38,11 @@ const MainModal = observer(({ alertStore, settingsStore }) => {
}`}
>
<TooltipWrapper title="Settings">
<span className="nav-link cursor-pointer" onClick={toggle.toggle}>
<span
id="components-settings"
className="nav-link cursor-pointer"
onClick={toggle.toggle}
>
<FontAwesomeIcon icon={faCog} />
</span>
</TooltipWrapper>

28
ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
View File

@@ -37,11 +37,8 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
</div>
<div class=\\"flex-shrink-0 flex-grow-0\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-1\\"
data-original-title=\\"Click to only show @silence_id=04d37636-2350-4878-b382-e0b50353230f alerts or Alt+Click to hide them\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<span class=\\" badge-primary badge-pill components-label-with-hover components-label badge\\"
style=\\"opacity: 1;\\"
@@ -113,11 +110,8 @@ exports[`<SilenceComment /> Matches snapshot when collapsed and multiple cluster
</div>
<div class=\\"flex-shrink-0 flex-grow-0\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-3\\"
data-original-title=\\"Click to only show @silence_id=04d37636-2350-4878-b382-e0b50353230f alerts or Alt+Click to hide them\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<span class=\\" badge-primary badge-pill components-label-with-hover components-label badge\\"
style=\\"opacity: 1;\\"
@@ -177,11 +171,8 @@ exports[`<SilenceComment /> Matches snapshot when collapsed and multiple cluster
</div>
<div class=\\"flex-shrink-0 flex-grow-0\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-4\\"
data-original-title=\\"Click to only show @silence_id=04d37636-2350-4878-b382-e0b50353230f alerts or Alt+Click to hide them\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<span class=\\" badge-primary badge-pill components-label-with-hover components-label badge\\"
style=\\"opacity: 1;\\"
@@ -241,11 +232,8 @@ exports[`<SilenceComment /> Matches snapshot when expanded 1`] = `
</div>
<div class=\\"flex-shrink-0 flex-grow-0\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-2\\"
data-original-title=\\"Click to only show @silence_id=04d37636-2350-4878-b382-e0b50353230f alerts or Alt+Click to hide them\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<span class=\\" badge-primary badge-pill components-label-with-hover components-label badge\\"
style=\\"opacity: 1;\\"

21
ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
View File

@@ -51,11 +51,8 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
</div>
<div class=\\"flex-shrink-0 flex-grow-0\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-1\\"
data-original-title=\\"Click to only show @silence_id=04d37636-2350-4878-b382-e0b50353230f alerts or Alt+Click to hide them\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<span class=\\" badge-primary badge-pill components-label-with-hover components-label badge\\"
style=\\"opacity: 1;\\"
@@ -121,11 +118,8 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
</div>
<div class=\\"flex-shrink-0 flex-grow-0\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-4\\"
data-original-title=\\"Click to only show @silence_id=04d37636-2350-4878-b382-e0b50353230f alerts or Alt+Click to hide them\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<span class=\\" badge-primary badge-pill components-label-with-hover components-label badge\\"
style=\\"opacity: 1;\\"
@@ -219,11 +213,8 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
<span class=\\"badge badge-light px-1 mr-1 components-label\\">
04d37636-2350-4878-b382-e0b50353230f
</span>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-5\\"
data-original-title=\\"Copy silence ID to the clipboard\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<span class=\\" badge badge-secondary px-1 mr-1 components-label cursor-pointer\\"
style=\\"opacity: 1;\\"

7
ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/MatchCounter.test.js.snap
View File

@@ -2,11 +2,8 @@
exports[`<MatchCounter /> matches snapshot 1`] = `
"
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-1\\"
data-original-title=\\"Number of alerts matching this label\\"
<div style=\\"display: inline-block; max-width: 100%;\\"
class=\\" tooltip-trigger\\"
>
<span class=\\"badge badge-light badge-pill d-block\\"
style=\\"font-size: 85%; line-height: 1rem;\\"

1
ui/src/Components/SilenceModal/index.js
View File

@@ -37,6 +37,7 @@ const SilenceModal = observer(
>
<TooltipWrapper title="New silence">
<span
id="components-new-silence"
className="nav-link cursor-pointer"
onClick={silenceFormStore.toggle.toggle}
>

56
ui/src/Components/TooltipWrapper/index.js
View File

@@ -1,19 +1,55 @@
import React from "react";
import PropTypes from "prop-types";
import { Tooltip } from "react-tippy";
import TooltipTrigger from "react-popper-tooltip";
import "react-tippy/dist/tippy.css";
const TooltipWrapper = ({ children, ...props }) => (
<Tooltip
delay={[1000, 100]}
size="small"
touchHold={true}
style={{ display: "inline-block", maxWidth: "100%" }}
{...props}
const Tooltip = ({ html, tooltip, children, className }) => (
<TooltipTrigger
trigger="hover"
placement="top"
delayShow={1000}
delayHide={100}
tooltip={({
arrowRef,
tooltipRef,
getArrowProps,
getTooltipProps,
placement,
}) => (
<div
{...getTooltipProps({
ref: tooltipRef,
className: "tooltip show tooltip-inner",
style: { transition: "opacity 0.2s" },
})}
>
{tooltip}
</div>
)}
>
{({ getTriggerProps, triggerRef }) => (
<div
{...getTriggerProps({
ref: triggerRef,
})}
style={{ display: "inline-block", maxWidth: "100%" }}
className={`${className ? className : ""} tooltip-trigger`}
>
{children}
</div>
)}
</TooltipTrigger>
);
const TooltipWrapper = ({ title, children, className }) => (
<Tooltip tooltip={title} className={className}>
{children}
</Tooltip>
);
TooltipWrapper.propTypes = {
title: PropTypes.node.isRequired,
children: PropTypes.node.isRequired,
className: PropTypes.string,
};
export { TooltipWrapper };

50
ui/src/Components/TooltipWrapper/index.test.js Normal file
View File

@@ -0,0 +1,50 @@
import React from "react";
import { mount } from "enzyme";
import { TooltipWrapper } from ".";
describe("TooltipWrapper", () => {
beforeAll(() => {
jest.useFakeTimers();
// https://stackoverflow.com/a/60974039/1154047
const mutationObserverMock = jest.fn(function MutationObserver(callback) {
this.observe = jest.fn();
this.disconnect = jest.fn();
// Optionally add a trigger() method to manually trigger a change
this.trigger = (mockedMutationsList) => {
callback(mockedMutationsList, this);
};
});
global.MutationObserver = mutationObserverMock;
});
it("renders only children", () => {
const tree = mount(
<TooltipWrapper title="my title">
<span>Hover me</span>
</TooltipWrapper>
);
expect(tree.text()).toBe("Hover me");
expect(tree.find("div.tooltip")).toHaveLength(0);
});
it("renders tooltip on hover and hides on blur", () => {
const tree = mount(
<TooltipWrapper title="my title">
<span>Hover me</span>
</TooltipWrapper>
);
tree.simulate("mouseEnter");
jest.runAllTimers();
tree.update();
expect(tree.find("div.tooltip")).toHaveLength(1);
tree.simulate("mouseLeave");
jest.runAllTimers();
tree.update();
expect(tree.find("div.tooltip")).toHaveLength(0);
});
});

4
ui/src/Styles/Components/AlertGroup.scss
View File

@@ -25,9 +25,9 @@
}
.components-label:not(:last-child),
div[data-tooltipped]:not(:last-child) > .components-label,
div.tooltip-trigger:not(:last-child) > .components-label,
.components-grid-annotation:not(:last-child),
div[data-tooltipped]:not(:last-child) > .components-grid-annotation {
div.tooltip-trigger:not(:last-child) > .components-grid-annotation {
margin-right: 0.25rem;
}

4
ui/src/Styles/Components/Tooltip.scss Normal file
View File

@@ -0,0 +1,4 @@
.tooltip-trigger {
display: inline-block;
max-width: 100%;
}

1
ui/src/Styles/DarkTheme.scss
View File

@@ -124,6 +124,7 @@ $color-default: #708090;
@import "Styles/Components/HistoryLabel";
@import "Styles/Components/SilenceModal";
@import "Styles/Components/Pagination";
@import "Styles/Components/Tooltip";
.badge,
.modal-content {

1
ui/src/Styles/LightTheme.scss
View File

@@ -106,6 +106,7 @@ $color-default: #708090;
@import "Styles/Components/HistoryLabel";
@import "Styles/Components/SilenceModal";
@import "Styles/Components/Pagination";
@import "Styles/Components/Tooltip";
a {
color: $link-color;

4
ui/src/__mocks__/popper.js.js
View File

@@ -1,10 +1,6 @@
// https://github.com/FezVrasta/popper.js/issues/478#issuecomment-341506071
import PopperJs from "popper.js";
export default class Popper {
static placements = PopperJs.placements;
constructor() {
return {
destroy: () => {},