diff --git a/ui/src/Components/Animations/MountFade/index.js b/ui/src/Components/Animations/MountFade/index.js deleted file mode 100644 index 3a9cc08ce..000000000 --- a/ui/src/Components/Animations/MountFade/index.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react"; -import PropTypes from "prop-types"; - -import { CSSTransition } from "react-transition-group"; - -const MountFade = ({ children, duration, ...props }) => ( - - {children} - -); -MountFade.propTypes = { - children: PropTypes.node.isRequired, -}; - -export { MountFade }; diff --git a/ui/src/Components/CenteredMessage/__snapshots__/index.test.js.snap b/ui/src/Components/CenteredMessage/__snapshots__/index.test.js.snap index b6ed545f0..94c9af1b2 100644 --- a/ui/src/Components/CenteredMessage/__snapshots__/index.test.js.snap +++ b/ui/src/Components/CenteredMessage/__snapshots__/index.test.js.snap @@ -3,8 +3,10 @@ exports[` matches snapshot 1`] = ` "

-
- Foo +
+
+ Foo +

" diff --git a/ui/src/Components/CenteredMessage/index.js b/ui/src/Components/CenteredMessage/index.js index 4cea9a1a0..99bcbe266 100644 --- a/ui/src/Components/CenteredMessage/index.js +++ b/ui/src/Components/CenteredMessage/index.js @@ -1,6 +1,6 @@ import React from "react"; -import { MountFade } from "Components/Animations/MountFade"; +import { Fade } from "react-reveal"; const CenteredMessage = ({ children, className }) => (

( className ? className : "display-1 text-placeholder" } screen-center`} > - {children} + + {children} +

); 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 278be5eda..58fbc435d 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 @@ -287,7 +287,9 @@ exports[` mathes snapshot when silence is rendered 1`] = ` link
-
+
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js index 1c2bc5b76..6702510bf 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js @@ -6,6 +6,8 @@ import { observable, action, toJS } from "mobx"; import hash from "object-hash"; +import { Fade } from "react-reveal"; + import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faPlus } from "@fortawesome/free-solid-svg-icons/faPlus"; import { faMinus } from "@fortawesome/free-solid-svg-icons/faMinus"; @@ -15,7 +17,6 @@ import { Settings } from "Stores/Settings"; import { AlertStore } from "Stores/AlertStore"; import { SilenceFormStore } from "Stores/SilenceFormStore"; import { BackgroundClassMap } from "Common/Colors"; -import { MountFade } from "Components/Animations/MountFade"; import { TooltipWrapper } from "Components/TooltipWrapper"; import { GroupHeader } from "./GroupHeader"; import { Alert } from "./Alert"; @@ -72,12 +73,17 @@ const AlertGroup = observer( { alertsToRender: this.defaultRenderCount, isMenuOpen: false, + animationDone: false, setIsMenuOpen(val) { this.isMenuOpen = val; }, + setAnimationDone() { + this.animationDone = true; + }, }, { setIsMenuOpen: action.bound, + setAnimationDone: action.bound, } ); @@ -222,10 +228,19 @@ const AlertGroup = observer( } return ( - -
+
) : null}
-
- + +
); } } diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js index 9c3baa84c..487262956 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js @@ -29,6 +29,8 @@ const MockGroup = (groupName) => { let originalInnerWidth; beforeAll(() => { + jest.useFakeTimers(); + originalInnerWidth = global.innerWidth; }); @@ -91,6 +93,24 @@ describe("", () => { tree.unmount(); }); + it("appends components-animation-fade-appear-done class after 1s", () => { + MockAlerts(5); + const tree = MountedAlertGroup(jest.fn(), true); + expect( + tree + .find("div.components-grid-alertgrid-alertgroup") + .hasClass("components-animation-fade-appear-done") + ).toBe(false); + + tree.instance().renderConfig.setAnimationDone(); + tree.update(); + expect( + tree + .find("div.components-grid-alertgrid-alertgroup") + .hasClass("components-animation-fade-appear-done") + ).toBe(true); + }); + it("renders Alertmanager labels in footer if showAlertmanagersInFooter=true", () => { MockAlerts(2); const tree = MountedAlertGroup(jest.fn(), true).find("AlertGroup"); diff --git a/ui/src/Components/Grid/AlertGrid/Grid.js b/ui/src/Components/Grid/AlertGrid/Grid.js index d7fa8bc6a..6ce6a3feb 100644 --- a/ui/src/Components/Grid/AlertGrid/Grid.js +++ b/ui/src/Components/Grid/AlertGrid/Grid.js @@ -6,6 +6,8 @@ import { observer } from "mobx-react"; import debounce from "lodash/debounce"; +import { Fade } from "react-reveal"; + import FontFaceObserver from "fontfaceobserver"; import MasonryInfiniteScroller from "react-masonry-infinite"; @@ -23,7 +25,6 @@ import { APIGrid } from "Models/API"; import { FilteringLabel } from "Components/Labels/FilteringLabel"; import { FilteringCounterBadge } from "Components/Labels/FilteringCounterBadge"; import { TooltipWrapper } from "Components/TooltipWrapper"; -import { MountFade } from "Components/Animations/MountFade"; import { DefaultDetailsCollapseValue } from "./AlertGroup/DetailsToggle"; import { AlertGroup } from "./AlertGroup"; @@ -180,59 +181,63 @@ const Grid = observer( return ( - -
- - - + {grid.labelName !== "" && ( + +
+ + + + + {grid.labelName !== "" && grid.labelValue !== "" && ( + + )} - {grid.labelName !== "" && grid.labelValue !== "" && ( - + - )} - - - - - - - - - + + + + + + + - -
- +
+ + )} matches snapshot 1`] = ` "

- - + - - + + + +

" `; diff --git a/ui/src/Components/Grid/FatalError/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/FatalError/__snapshots__/index.test.js.snap index ff7b85610..75f66c2c5 100644 --- a/ui/src/Components/Grid/FatalError/__snapshots__/index.test.js.snap +++ b/ui/src/Components/Grid/FatalError/__snapshots__/index.test.js.snap @@ -3,7 +3,7 @@ exports[` matches snapshot 1`] = ` "

-
+
matches snapshot 1`] = ` "

-
+
matches snapshot 1`] = ` "

-
+
matches snapshot when collapsed 1`] = ` " -
+
@@ -85,7 +87,9 @@ exports[` matches snapshot when collapsed 1`] = ` exports[` matches snapshot with expaned details 1`] = ` " -
+
diff --git a/ui/src/Components/ManagedSilence/index.js b/ui/src/Components/ManagedSilence/index.js index 7652dfba9..dba945b02 100644 --- a/ui/src/Components/ManagedSilence/index.js +++ b/ui/src/Components/ManagedSilence/index.js @@ -4,10 +4,11 @@ import PropTypes from "prop-types"; import { observable, action } from "mobx"; import { observer } from "mobx-react"; +import { Fade } from "react-reveal"; + import { APISilence } from "Models/API"; import { AlertStore } from "Stores/AlertStore"; import { SilenceFormStore, SilenceTabNames } from "Stores/SilenceFormStore"; -import { MountFade } from "Components/Animations/MountFade"; import { SilenceComment } from "./SilenceComment"; import { SilenceDetails } from "./SilenceDetails"; @@ -77,7 +78,7 @@ const ManagedSilence = observer( } = this.props; return ( - +
)}
- + ); } } diff --git a/ui/src/Components/SilenceModal/Browser/index.js b/ui/src/Components/SilenceModal/Browser/index.js index 5c49b27d1..b7940cda1 100644 --- a/ui/src/Components/SilenceModal/Browser/index.js +++ b/ui/src/Components/SilenceModal/Browser/index.js @@ -6,6 +6,8 @@ import { observer } from "mobx-react"; import debounce from "lodash/debounce"; +import { Fade } from "react-reveal"; + import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faSpinner } from "@fortawesome/free-solid-svg-icons/faSpinner"; import { faExclamationCircle } from "@fortawesome/free-solid-svg-icons/faExclamationCircle"; @@ -16,7 +18,6 @@ import { AlertStore, FormatBackendURI } from "Stores/AlertStore"; import { SilenceFormStore } from "Stores/SilenceFormStore"; import { Settings } from "Stores/Settings"; import { FetchGet } from "Common/Fetch"; -import { MountFade } from "Components/Animations/MountFade"; import { ManagedSilence } from "Components/ManagedSilence"; import { PageSelect } from "Components/Pagination"; @@ -33,11 +34,11 @@ FetchError.propTypes = { }; const Placeholder = ({ content }) => ( - +

{content}

- + ); Placeholder.propTypes = { content: PropTypes.node.isRequired, diff --git a/ui/src/Styles/Components/AlertGrid.scss b/ui/src/Styles/Components/AlertGrid.scss index d4850fa21..203ab0c0c 100644 --- a/ui/src/Styles/Components/AlertGrid.scss +++ b/ui/src/Styles/Components/AlertGrid.scss @@ -1,12 +1,3 @@ -.components-grid-alertgrid-alertgroup.components-animation-fade-appear-done { - will-change: transform; - transform: translateZ(0); - - transition-property: transform; - transition-duration: 0.4s; - transition-timing-function: ease; -} - .components-grid-swimlane { font-size: 1.4rem; background-color: $grid-swimlane-bg; diff --git a/ui/src/Styles/Components/AlertGroup.scss b/ui/src/Styles/Components/AlertGroup.scss index f19c28c97..174ab749e 100644 --- a/ui/src/Styles/Components/AlertGroup.scss +++ b/ui/src/Styles/Components/AlertGroup.scss @@ -1,3 +1,12 @@ +.components-grid-alertgrid-alertgroup.components-animation-fade-appear-done { + will-change: transform; + transform: translateZ(0); + + transition-property: transform; + transition-duration: 0.4s; + transition-timing-function: ease; +} + .components-grid-alertgrid-alertgroup { padding: 0.3rem; } diff --git a/ui/src/Styles/Components/MountFade.scss b/ui/src/Styles/Components/MountFade.scss deleted file mode 100644 index 079c6c290..000000000 --- a/ui/src/Styles/Components/MountFade.scss +++ /dev/null @@ -1,12 +0,0 @@ -.components-animation-fade { - will-change: opacity; - transform: translateZ(0); -} - -.components-animation-fade-appear { - opacity: 0.01; -} -.components-animation-fade-appear-active { - opacity: 1; - transition: opacity 0.3s ease-in; -} diff --git a/ui/src/Styles/DarkTheme.scss b/ui/src/Styles/DarkTheme.scss index 9725c5405..3267ca12c 100644 --- a/ui/src/Styles/DarkTheme.scss +++ b/ui/src/Styles/DarkTheme.scss @@ -122,7 +122,6 @@ $color-default: #708090; @import "Styles/Components/DropdownSlide"; @import "Styles/Components/History"; @import "Styles/Components/HistoryLabel"; -@import "Styles/Components/MountFade"; @import "Styles/Components/NavBarSlide"; @import "Styles/Components/SilenceModal"; @import "Styles/Components/Pagination"; diff --git a/ui/src/Styles/LightTheme.scss b/ui/src/Styles/LightTheme.scss index a95aa00cb..0a4427a24 100644 --- a/ui/src/Styles/LightTheme.scss +++ b/ui/src/Styles/LightTheme.scss @@ -104,7 +104,6 @@ $color-default: #708090; @import "Styles/Components/DropdownSlide"; @import "Styles/Components/History"; @import "Styles/Components/HistoryLabel"; -@import "Styles/Components/MountFade"; @import "Styles/Components/NavBarSlide"; @import "Styles/Components/SilenceModal"; @import "Styles/Components/Pagination";