From 17179f44b1ff91be7fb34ab0408332664d020741 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Thu, 18 Jun 2020 19:35:26 +0100
Subject: [PATCH] fix(ui): ensure that group animations are enabled after mount

---
 ui/src/Components/Grid/AlertGrid/AlertGroup/index.js      | 7 ++++++-
 ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js | 2 ++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
index cf63cd407..4f87a42c8 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js
@@ -162,11 +162,15 @@ const AlertGroup = ({
 
   const mountRef = useRef(null);
 
+  const [fadeDone, setFadeDone] = useState(false);
+
   return useObserver(() => (
     <div
       ref={mountRef}
       className={`components-grid-alertgrid-alertgroup ${
-        mountRef.current ? "components-animation-fade-appear-done" : ""
+        mountRef.current && fadeDone
+          ? "components-animation-fade-appear-done"
+          : ""
       }`}
       style={{
         width: groupWidth,
@@ -180,6 +184,7 @@ const AlertGroup = ({
         in={context.animations.in}
         duration={context.animations.duration}
         wait={context.animations.duration}
+        onReveal={() => setFadeDone(true)}
       >
         <div
           className={`card ${cardBackgroundClass}`}
diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js
index 5b9b9259c..05f7ecaea 100644
--- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js
+++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.js
@@ -111,6 +111,8 @@ describe("<AlertGroup />", () => {
         .hasClass("components-animation-fade-appear-done")
     ).toBe(false);
     tree.setProps({});
+    act(() => tree.find("RevealBase").at(0).props().onReveal());
+    tree.update();
     expect(
       tree
         .find("div.components-grid-alertgrid-alertgroup")