fix(ui): ensure that group animations are enabled after mount

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}`}

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")