fix(ui): reset failed ack button after 20s

If acking an alert fails we render failure icon, but there's no way to try again. Reset button after 20s.

ui/src/Components/AlertAck/index.js

@@ -118,6 +118,18 @@ const AlertAck = ({ alertStore, silenceFormStore, group }) => {
     }
   }, [alertStore.data, clusters, currentCluster, reset]);
 
+  useEffect(() => {
+    let timer;
+    if (!isAcking && error) {
+      timer = setTimeout(() => {
+        setUpstreams([]);
+        setIsAcking(false);
+        reset();
+      }, 20 * 1000);
+    }
+    return () => clearTimeout(timer);
+  }, [isAcking, error, reset]);
+
   return useObserver(() =>
     alertStore.settings.values.alertAcknowledgement.enabled === false ? null : (
       <TooltipWrapper

ui/src/Components/AlertAck/index.test.js

@@ -20,6 +20,7 @@ let alerts;
 let group;
 
 beforeEach(() => {
+  jest.useFakeTimers();
   advanceTo(new Date(Date.UTC(2000, 1, 1, 0, 0, 0)));
 
   alertStore = new AlertStore([]);
@@ -126,6 +127,30 @@ describe("<AlertAck />", () => {
     expect(toDiffableHtml(tree.html())).toMatch(/fa-exclamation-circle/);
   });
 
+  it("resets faExclamationCircle after 20s", async () => {
+    fetchMock.any(
+      {
+        status: 500,
+        body: "error message",
+      },
+      {
+        overwriteRoutes: true,
+      }
+    );
+    const tree = MountedAlertAck();
+    const button = tree.find("span.badge");
+    button.simulate("click");
+    await act(async () => {
+      await fetchMock.flush(true);
+    });
+    expect(toDiffableHtml(tree.html())).toMatch(/fa-exclamation-circle/);
+
+    act(() => jest.advanceTimersByTime(21 * 1000));
+    tree.update();
+    expect(toDiffableHtml(tree.html())).not.toMatch(/fa-exclamation-circle/);
+    expect(toDiffableHtml(tree.html())).toMatch(/fa-check/);
+  });
+
   it("uses faCheckCircle after successful fetch", async () => {
     const tree = MountedAlertAck();
     const button = tree.find("span.badge");