From 548623fef44330e029e7414c5266ac2fadb04239 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sat, 17 Aug 2019 11:03:40 +0100
Subject: [PATCH] chore(ui): flash counter badge on value change

---
 ui/src/Components/Labels/FilteringCounterBadge/index.js      | 4 ++++
 ui/src/Components/Labels/FilteringCounterBadge/index.test.js | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/ui/src/Components/Labels/FilteringCounterBadge/index.js b/ui/src/Components/Labels/FilteringCounterBadge/index.js
index 92e4bc433..0383ca360 100644
--- a/ui/src/Components/Labels/FilteringCounterBadge/index.js
+++ b/ui/src/Components/Labels/FilteringCounterBadge/index.js
@@ -3,6 +3,8 @@ import PropTypes from "prop-types";
 
 import { inject, observer } from "mobx-react";
 
+import Flash from "react-reveal/Flash";
+
 import { AlertStore } from "Stores/AlertStore";
 import { TooltipWrapper } from "Components/TooltipWrapper";
 import { BaseLabel } from "Components/Labels/BaseLabel";
@@ -36,6 +38,7 @@ const FilteringCounterBadge = inject("alertStore")(
           <TooltipWrapper
             title={`Click to only show ${value} alerts or Alt+Click to hide them`}
           >
+          <Flash spy={counter}>
             <span
               className={
                 themed
@@ -50,6 +53,7 @@ const FilteringCounterBadge = inject("alertStore")(
             >
               {counter}
             </span>
+          </Flash>
           </TooltipWrapper>
         );
       }
diff --git a/ui/src/Components/Labels/FilteringCounterBadge/index.test.js b/ui/src/Components/Labels/FilteringCounterBadge/index.test.js
index caf639d8c..4be7cf671 100644
--- a/ui/src/Components/Labels/FilteringCounterBadge/index.test.js
+++ b/ui/src/Components/Labels/FilteringCounterBadge/index.test.js
@@ -35,7 +35,8 @@ const validateStyle = (value, themed) => {
       themed={themed}
     />
   );
-  expect(tree.find("span").prop("style")).toEqual({});
+  // opacity=>1 is set by react-reveal/Flash
+  expect(tree.find("span").prop("style")).toEqual({"opacity": 1});
 };
 
 const validateOnClick = (value, themed) => {