Merge pull request #880 from prymitive/flash-badge

chore(ui): flash counter badge on value change

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>
         );
       }

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) => {