github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-08-19 11:36:24 +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 11:14:45 +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
ui/e2e/demo.test.js
+4 -12
View File
@@ -47,13 +47,9 @@ describe("Demo", () => {
});
it("opens silence modal on click", async () => {
await page.waitForSelector(
'[data-original-title="New silence"] > span.nav-link.cursor-pointer'
);
await page.waitForSelector("#components-new-silence");
await expect(page).toClick(
'[data-original-title="New silence"] > span.nav-link.cursor-pointer'
);
await expect(page).toClick("#components-new-silence");
await page.waitForSelector("div.modal-content");
await page.waitForSelector(".modal-body > form");
@@ -62,13 +58,9 @@ describe("Demo", () => {
});
it("opens settings modal on click", async () => {
await page.waitForSelector(
'[data-original-title="Settings"] > span.nav-link.cursor-pointer'
);
await page.waitForSelector("#components-settings");
await expect(page).toClick(
'[data-original-title="Settings"] > span.nav-link.cursor-pointer'
);
await expect(page).toClick("#components-settings");
await page.waitForSelector("div.modal-content");
await page.waitForSelector(".modal-body > form.accordion");
ui/package-lock.json
Generated
-10
View File
@@ -19169,7 +19169,6 @@
"version": "2.11.1",
"resolved": "https://registry.npmjs.org/react-popper-tooltip/-/react-popper-tooltip-2.11.1.tgz",
"integrity": "sha512-04A2f24GhyyMicKvg/koIOQ5BzlrRbKiAgP6L+Pdj1MVX3yJ1NeZ8+EidndQsbejFT55oW1b++wg2Z8KlAyhfQ==",
"dev": true,
"requires": {
"@babel/runtime": "^7.9.2",
"react-popper": "^1.3.7"
@@ -19179,7 +19178,6 @@
"version": "1.3.7",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz",
"integrity": "sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==",
"dev": true,
"requires": {
"@babel/runtime": "^7.1.2",
"create-react-context": "^0.3.0",
@@ -19349,14 +19347,6 @@
}
}
},
"react-tippy": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/react-tippy/-/react-tippy-1.4.0.tgz",
"integrity": "sha512-r/hM5XK9Ztr2ZY7IWKuRmISTlUPS/R6ddz6PO2EuxCgW+4JBcGZRPU06XcVPRDCOIiio8ryBQFrXMhFMhsuaHA==",
"requires": {
"popper.js": "^1.11.1"
}
},
"react-transition-group": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz",
ui/package.json
+1 -1
View File
@@ -51,11 +51,11 @@
"react-media": "1.10.0",
"react-moment": "0.9.7",
"react-popper": "2.2.3",
"react-popper-tooltip": "2.11.1",
"react-resize-detector": "4.2.3",
"react-reveal": "1.2.2",
"react-scripts": "3.4.1",
"react-select": "3.1.0",
"react-tippy": "1.4.0",
"react-transition-group": "4.4.1",
"typeface-open-sans": "0.0.75",
"typescript": "3.9.2"
ui/src/Components/AlertAck/index.js
+1 -2
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"
}
>
ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap
+18 -45
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\\">
ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap
+4 -6
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\\">
ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
+24 -60
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\\">
ui/src/Components/Labels/FilteringLabel/__snapshots__/index.test.js.snap
+2 -5
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\\">
ui/src/Components/MainModal/index.js
+5 -1
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>
ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
+8 -20
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;\\"
ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
+6 -15
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;\\"
ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/MatchCounter.test.js.snap
+2 -5
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;\\"
ui/src/Components/SilenceModal/index.js
+1
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}
>
ui/src/Components/TooltipWrapper/index.js
+46 -10
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 };
ui/src/Components/TooltipWrapper/index.test.js
+50
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);
});
});
ui/src/Styles/Components/AlertGroup.scss
+2 -2
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;
}
ui/src/Styles/Components/Tooltip.scss
+4
View File
@@ -0,0 +1,4 @@
.tooltip-trigger {
display: inline-block;
max-width: 100%;
}
ui/src/Styles/DarkTheme.scss
+1
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 {
ui/src/Styles/LightTheme.scss
+1
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;
ui/src/__mocks__/popper.js.js
-4
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: () => {},