From 80bbc580903147d590404fb92b93a33a7bb4785f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Thu, 14 May 2020 10:12:51 +0100 Subject: [PATCH] fix(ui): use react-popper-tooltip instead of react-tippy --- ui/e2e/demo.test.js | 16 +--- ui/package-lock.json | 10 --- ui/package.json | 2 +- ui/src/Components/AlertAck/index.js | 3 +- .../Alert/__snapshots__/index.test.js.snap | 63 ++++---------- .../__snapshots__/index.test.js.snap | 10 +-- .../__snapshots__/index.test.js.snap | 84 ++++++------------- .../__snapshots__/index.test.js.snap | 7 +- ui/src/Components/MainModal/index.js | 6 +- .../__snapshots__/SilenceComment.test.js.snap | 28 ++----- .../__snapshots__/index.test.js.snap | 21 ++--- .../__snapshots__/MatchCounter.test.js.snap | 7 +- ui/src/Components/SilenceModal/index.js | 1 + ui/src/Components/TooltipWrapper/index.js | 56 ++++++++++--- .../Components/TooltipWrapper/index.test.js | 50 +++++++++++ ui/src/Styles/Components/AlertGroup.scss | 4 +- ui/src/Styles/Components/Tooltip.scss | 4 + ui/src/Styles/DarkTheme.scss | 1 + ui/src/Styles/LightTheme.scss | 1 + ui/src/__mocks__/popper.js.js | 4 - 20 files changed, 180 insertions(+), 198 deletions(-) create mode 100644 ui/src/Components/TooltipWrapper/index.test.js create mode 100644 ui/src/Styles/Components/Tooltip.scss diff --git a/ui/e2e/demo.test.js b/ui/e2e/demo.test.js index 7e9202767..8ece97f35 100644 --- a/ui/e2e/demo.test.js +++ b/ui/e2e/demo.test.js @@ -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"); diff --git a/ui/package-lock.json b/ui/package-lock.json index c48a43d88..01334baff 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -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", diff --git a/ui/package.json b/ui/package.json index 3643e81fc..3893ae908 100644 --- a/ui/package.json +++ b/ui/package.json @@ -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" diff --git a/ui/src/Components/AlertAck/index.js b/ui/src/Components/AlertAck/index.js index f848f54e1..74df2fafc 100644 --- a/ui/src/Components/AlertAck/index.js +++ b/ui/src/Components/AlertAck/index.js @@ -183,10 +183,9 @@ const AlertAck = ({ alertStore, silenceFormStore, group }) => { return useObserver(() => alertStore.settings.values.alertAcknowledgement.enabled === false ? null : ( diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap index bb7a704c9..1afe7d473 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap @@ -4,11 +4,8 @@ exports[` matches snapshot when inhibited 1`] = ` "
  • -
    @@ -37,11 +34,8 @@ exports[` matches snapshot when inhibited 1`] = `
    -
    matches snapshot when inhibited 1`] = ` a day ago -
    matches snapshot when inhibited 1`] = `
    -
    @@ -122,11 +110,8 @@ exports[` matches snapshot when inhibited 1`] = `
    -
    @@ -166,11 +151,8 @@ exports[` matches snapshot with showAlertmanagers=false showReceiver=fa "
  • -
    @@ -199,11 +181,8 @@ exports[` matches snapshot with showAlertmanagers=false showReceiver=fa
    -
    matches snapshot with showAlertmanagers=false showReceiver=fa a day ago -
    @@ -261,11 +237,8 @@ exports[` matches snapshot with showAlertmanagers=false showReceiver=fa
    -
    diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap index 81dad7c93..82f23198e 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap @@ -28,9 +28,8 @@ exports[` matches snapshot 1`] = ` exports[` matches snapshot when visible=false 1`] = ` " -
    matches snapshot when visible=false 1`] = ` exports[` matches snapshot when visible=true 1`] = ` " -
    diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap index 8b90b1318..9626d677b 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap @@ -4,11 +4,8 @@ exports[` matches snapshot 1`] = ` "
    -
    @@ -37,11 +34,8 @@ exports[` matches snapshot 1`] = `
    -
    matches snapshot 1`] = `
    -
    @@ -77,11 +68,8 @@ exports[` matches snapshot 1`] = `
    -
    @@ -92,11 +80,8 @@ exports[` matches snapshot 1`] = `
    -
    @@ -107,11 +92,8 @@ exports[` matches snapshot 1`] = `
    -
    @@ -151,11 +133,8 @@ exports[` mathes snapshot when silence is rendered 1`] = ` "
    -
    @@ -184,11 +163,8 @@ exports[` mathes snapshot when silence is rendered 1`] = `
    -
    mathes snapshot when silence is rendered 1`] = `
    -
    @@ -224,11 +197,8 @@ exports[` mathes snapshot when silence is rendered 1`] = `
    -
    @@ -239,11 +209,8 @@ exports[` mathes snapshot when silence is rendered 1`] = `
    -
    @@ -254,11 +221,8 @@ exports[` mathes snapshot when silence is rendered 1`] = `
    -
    diff --git a/ui/src/Components/Labels/FilteringLabel/__snapshots__/index.test.js.snap b/ui/src/Components/Labels/FilteringLabel/__snapshots__/index.test.js.snap index 6f05c6d96..05389d0cd 100644 --- a/ui/src/Components/Labels/FilteringLabel/__snapshots__/index.test.js.snap +++ b/ui/src/Components/Labels/FilteringLabel/__snapshots__/index.test.js.snap @@ -2,11 +2,8 @@ exports[` matches snapshot 1`] = ` " -
    diff --git a/ui/src/Components/MainModal/index.js b/ui/src/Components/MainModal/index.js index 807012094..c2f2ceb45 100644 --- a/ui/src/Components/MainModal/index.js +++ b/ui/src/Components/MainModal/index.js @@ -38,7 +38,11 @@ const MainModal = observer(({ alertStore, settingsStore }) => { }`} > - + diff --git a/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap b/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap index 3d7e27380..683477603 100644 --- a/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap +++ b/ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap @@ -37,11 +37,8 @@ exports[` Matches snapshot when collapsed 1`] = `
    -
    Matches snapshot when collapsed and multiple cluster
    -
    Matches snapshot when collapsed and multiple cluster
    -
    Matches snapshot when expanded 1`] = `
    -
    matches snapshot when collapsed 1`] = `
    -
    matches snapshot with expaned details 1`] = `
    -
    matches snapshot with expaned details 1`] = ` 04d37636-2350-4878-b382-e0b50353230f -
    matches snapshot 1`] = ` " -
    diff --git a/ui/src/Components/TooltipWrapper/index.js b/ui/src/Components/TooltipWrapper/index.js index e6ce4dba4..c7c97e33c 100644 --- a/ui/src/Components/TooltipWrapper/index.js +++ b/ui/src/Components/TooltipWrapper/index.js @@ -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} +
    + )} > + {({ getTriggerProps, triggerRef }) => ( +
    + {children} +
    + )} +     +); + +const TooltipWrapper = ({ title, children, className }) => ( + {children} ); +TooltipWrapper.propTypes = { + title: PropTypes.node.isRequired, + children: PropTypes.node.isRequired, + className: PropTypes.string, +}; export { TooltipWrapper }; diff --git a/ui/src/Components/TooltipWrapper/index.test.js b/ui/src/Components/TooltipWrapper/index.test.js new file mode 100644 index 000000000..c055b7cd2 --- /dev/null +++ b/ui/src/Components/TooltipWrapper/index.test.js @@ -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( + + Hover me + + ); + 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( + + Hover me + + ); + + 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); + }); +}); diff --git a/ui/src/Styles/Components/AlertGroup.scss b/ui/src/Styles/Components/AlertGroup.scss index 174ab749e..693405e61 100644 --- a/ui/src/Styles/Components/AlertGroup.scss +++ b/ui/src/Styles/Components/AlertGroup.scss @@ -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; } diff --git a/ui/src/Styles/Components/Tooltip.scss b/ui/src/Styles/Components/Tooltip.scss new file mode 100644 index 000000000..6c61a27f3 --- /dev/null +++ b/ui/src/Styles/Components/Tooltip.scss @@ -0,0 +1,4 @@ +.tooltip-trigger { + display: inline-block; + max-width: 100%; +} diff --git a/ui/src/Styles/DarkTheme.scss b/ui/src/Styles/DarkTheme.scss index d95519011..2a5f35541 100644 --- a/ui/src/Styles/DarkTheme.scss +++ b/ui/src/Styles/DarkTheme.scss @@ -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 { diff --git a/ui/src/Styles/LightTheme.scss b/ui/src/Styles/LightTheme.scss index ff363343d..ce2497408 100644 --- a/ui/src/Styles/LightTheme.scss +++ b/ui/src/Styles/LightTheme.scss @@ -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; diff --git a/ui/src/__mocks__/popper.js.js b/ui/src/__mocks__/popper.js.js index 485a2f226..19b1571bb 100644 --- a/ui/src/__mocks__/popper.js.js +++ b/ui/src/__mocks__/popper.js.js @@ -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: () => {},