From 78660cd3746a6d91acce1e6a08fcdc49b781b112 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sun, 12 May 2019 11:09:34 +0100
Subject: [PATCH] feat(ui): animate alert counter on changes

---
 ui/src/Components/NavBar/index.js      | 8 +++++++-
 ui/src/Components/NavBar/index.test.js | 4 ++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/ui/src/Components/NavBar/index.js b/ui/src/Components/NavBar/index.js
index 553a60249..cd918c293 100644
--- a/ui/src/Components/NavBar/index.js
+++ b/ui/src/Components/NavBar/index.js
@@ -8,6 +8,8 @@ import ReactResizeDetector from "react-resize-detector";
 
 import IdleTimer from "react-idle-timer";
 
+import Flash from "react-reveal/Flash";
+
 import { AlertStore } from "Stores/AlertStore";
 import { Settings } from "Stores/Settings";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
@@ -122,7 +124,11 @@ const NavBar = observer(
               <nav className="navbar fixed-top navbar-expand navbar-dark p-1 bg-primary-transparent d-inline-block">
                 <ReactResizeDetector handleHeight onResize={this.onResize} />
                 <span className="navbar-brand my-0 mx-2 h1 d-none d-sm-block float-left">
-                  {alertStore.info.totalAlerts}
+                  <Flash spy={alertStore.info.totalAlerts}>
+                    <div className="d-inline-block">
+                      {alertStore.info.totalAlerts}
+                    </div>
+                  </Flash>
                   <FetchIndicator alertStore={alertStore} />
                 </span>
                 <ul className={`navbar-nav float-right d-flex ${flexClass}`}>
diff --git a/ui/src/Components/NavBar/index.test.js b/ui/src/Components/NavBar/index.test.js
index 5dbcc17e9..bac45a485 100644
--- a/ui/src/Components/NavBar/index.test.js
+++ b/ui/src/Components/NavBar/index.test.js
@@ -54,9 +54,9 @@ const ValidateNavClass = (totalFilters, expectedClass) => {
 describe("<NavBar />", () => {
   it("navbar-brand shows 15 alerts with totalAlerts=15", () => {
     alertStore.info.totalAlerts = 15;
-    const tree = RenderNavbar();
+    const tree = MountedNavbar();
     const brand = tree.find(".navbar-brand");
-    expect(brand.text()).toBe("15<FetchIndicator />");
+    expect(brand.text()).toBe("15");
   });
 
   it("navbar-nav includes 'flex-row' class with 0 filters", () => {