diff --git a/ui/src/Components/Animations/NavBarSlide/index.css b/ui/src/Components/Animations/NavBarSlide/index.css new file mode 100644 index 000000000..3f97215e9 --- /dev/null +++ b/ui/src/Components/Animations/NavBarSlide/index.css @@ -0,0 +1,17 @@ +.components-animation-navbar-appear, +.components-animation-navbar-enter { + opacity: 0.01; +} +.components-animation-navbar-appear-active, +.components-animation-navbar-enter-active { + opacity: 1; + transition: opacity 0.5s ease-in; +} + +.components-animation-navbar-exit { + opacity: 1; +} +.components-animation-navbar-exit-active { + opacity: 0.01; + transition: opacity 0.5s ease-out; +} diff --git a/ui/src/Components/Animations/NavBarSlide/index.js b/ui/src/Components/Animations/NavBarSlide/index.js new file mode 100644 index 000000000..771c8cb0f --- /dev/null +++ b/ui/src/Components/Animations/NavBarSlide/index.js @@ -0,0 +1,24 @@ +import React from "react"; +import PropTypes from "prop-types"; + +import { CSSTransition } from "react-transition-group"; + +import "./index.css"; + +const NavBarSlide = ({ children, duration, ...props }) => ( + + {children} + +); +NavBarSlide.propTypes = { + children: PropTypes.node.isRequired +}; + +export { NavBarSlide }; diff --git a/ui/src/Components/NavBar/__snapshots__/index.test.js.snap b/ui/src/Components/NavBar/__snapshots__/index.test.js.snap index e3a309297..3f636af32 100644 --- a/ui/src/Components/NavBar/__snapshots__/index.test.js.snap +++ b/ui/src/Components/NavBar/__snapshots__/index.test.js.snap @@ -1,5 +1,263 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` matches snapshot with 0 alerts 1`] = `"0"`; +exports[` matches snapshot with 0 alerts 1`] = ` +" +
+ +
+" +`; -exports[` matches snapshot with 5 alerts 1`] = `"5"`; +exports[` matches snapshot with 5 alerts 1`] = ` +" +
+ +
+" +`; diff --git a/ui/src/Components/NavBar/index.js b/ui/src/Components/NavBar/index.js index 28f633e68..3590ad0aa 100644 --- a/ui/src/Components/NavBar/index.js +++ b/ui/src/Components/NavBar/index.js @@ -11,7 +11,7 @@ import IdleTimer from "react-idle-timer"; import { AlertStore } from "Stores/AlertStore"; import { Settings } from "Stores/Settings"; import { SilenceFormStore } from "Stores/SilenceFormStore"; -import { DropdownSlide } from "Components/Animations/DropdownSlide"; +import { NavBarSlide } from "Components/Animations/NavBarSlide"; import { MainModal } from "Components/MainModal"; import { SilenceModal } from "Components/SilenceModal"; import { FetchIndicator } from "./FetchIndicator"; @@ -20,7 +20,7 @@ import { FilterInput } from "./FilterInput"; import "./index.css"; const DesktopIdleTimeout = 1000 * 60 * 3; -const MobileIdleTimeout = 1000 * 5; +const MobileIdleTimeout = 1000 * 12; const NavBar = observer( class NavBar extends Component { @@ -108,13 +108,12 @@ const NavBar = observer( window.innerWidth >= 768 ? DesktopIdleTimeout : MobileIdleTimeout } > - -
+
+ -
- + +
); } diff --git a/ui/src/Components/NavBar/index.test.js b/ui/src/Components/NavBar/index.test.js index c0037295f..c416621cf 100644 --- a/ui/src/Components/NavBar/index.test.js +++ b/ui/src/Components/NavBar/index.test.js @@ -4,6 +4,8 @@ import { shallow, mount } from "enzyme"; import moment from "moment"; +import toDiffableHtml from "diffable-html"; + import { AlertStore, NewUnappliedFilter } from "Stores/AlertStore"; import { Settings } from "Stores/Settings"; import { SilenceFormStore } from "Stores/SilenceFormStore"; @@ -54,13 +56,13 @@ const ValidateNavClass = (totalFilters, expectedClass) => { describe("", () => { it("matches snapshot with 0 alerts", () => { const tree = RenderNavbar(); - expect(tree.text()).toMatchSnapshot(); + expect(toDiffableHtml(tree.html())).toMatchSnapshot(); }); it("matches snapshot with 5 alerts", () => { alertStore.info.totalAlerts = 5; const tree = RenderNavbar(); - expect(tree.text()).toMatchSnapshot(); + expect(toDiffableHtml(tree.html())).toMatchSnapshot(); }); it("navbar-brand shows 15 alerts with totalAlerts=15", () => { @@ -109,10 +111,10 @@ describe("", () => { jest.useFakeTimers(); }); - it("hides navbar after 5 seconds on mobile", () => { + it("hides navbar after 12 seconds on mobile", () => { global.window.innerWidth = 500; const tree = MountedNavbar(); - jest.runTimersToTime(1000 * 6); + jest.runTimersToTime(1000 * 13); tree.update(); expect(tree.find(".container").hasClass("visible")).toBe(false); expect(tree.find(".container").hasClass("invisible")).toBe(true);