Adjust undo toast timeout 12s -> 8s (#44422)

* Adjust undo toast timeout 12s -> 8s

* typo

* Address review

e2e/test/scenarios/dashboard-filters/dashboard-filters-auto-wiring.cy.spec.js

@@ -660,6 +660,38 @@ describe("dashboard filters auto-wiring", () => {
         .should("have.length", 1)
         .should("contain", "Removed card");
     });
+
+    it("should dismiss toasts on timeout", () => {
+      createDashboardWithCards({ cards }).then(dashboardId => {
+        visitDashboard(dashboardId);
+      });
+
+      editDashboard();
+      setFilter("Text or Category", "Is");
+
+      cy.clock();
+      selectDashboardFilter(getDashboardCard(0), "Name");
+
+      undoToast().should("be.visible");
+
+      // AUTO_WIRE_TOAST_TIMEOUT
+      cy.tick(12000);
+
+      undoToast().should("not.exist");
+
+      removeFilterFromDashCard(0);
+
+      selectDashboardFilter(getDashboardCard(0), "Name");
+
+      cy.clock();
+      undoToast().findByRole("button", { name: "Auto-connect" }).click();
+
+      undoToast().should("be.visible");
+
+      // AUTO_WIRE_UNDO_TOAST_TIMEOUT
+      cy.tick(8000);
+      undoToast().should("not.exist");
+    });
   });
 });
 

frontend/src/metabase/containers/UndoListing.jsx

@@ -121,7 +121,12 @@ function UndoToast({ undo, onUndo, onDismiss }) {
               pos="absolute"
               top={0}
               left={0}
+              w="100%"
               className={CS.progress}
+              /* override animation duration based on timeout */
+              style={{
+                animationDuration: `${undo.initialTimeout}ms`,
+              }}
             />
           )}
           <CardContent>

frontend/src/metabase/containers/UndoListing.module.css

@@ -9,10 +9,8 @@
 }
 
 .progress {
-  /* it must be in sync with AUTO_WIRE_TOAST_TIMEOUT */
-  animation: animated-progress 12s linear;
+  animation: animated-progress linear;
   transform-origin: left;
-  width: 100%;
 }
 
 .toast:hover .progress {

frontend/src/metabase/dashboard/actions/auto-wire-parameters/constants.ts

 export const AUTO_WIRE_TOAST_TIMEOUT = 12000;
+export const AUTO_WIRE_UNDO_TOAST_TIMEOUT = 8000;

frontend/src/metabase/dashboard/actions/auto-wire-parameters/toasts.ts

@@ -16,7 +16,10 @@ import type {
 } from "metabase-types/api";
 import type { Dispatch, GetState } from "metabase-types/store";
 
-import { AUTO_WIRE_TOAST_TIMEOUT } from "./constants";
+import {
+  AUTO_WIRE_TOAST_TIMEOUT,
+  AUTO_WIRE_UNDO_TOAST_TIMEOUT,
+} from "./constants";
 
 export const AUTO_WIRE_TOAST_ID = _.uniqueId();
 
@@ -75,7 +78,7 @@ export const showAutoWireParametersToast =
           message: t`The filter was auto-connected to all questions containing “${columnName}”.`,
           actionLabel: t`Undo`,
           showProgress: true,
-          timeout: 12000,
+          timeout: AUTO_WIRE_UNDO_TOAST_TIMEOUT,
           type: "filterAutoConnectDone",
           extraInfo: {
             dashcardIds: dashcardAttributes.map(({ id }) => id),
@@ -155,7 +158,7 @@ export const showAddedCardAutoWireParametersToast =
         addUndo({
           message,
           showProgress: true,
-          timeout: AUTO_WIRE_TOAST_TIMEOUT,
+          timeout: AUTO_WIRE_UNDO_TOAST_TIMEOUT,
           type: "filterAutoConnect",
           action: revertAutoWireParametersToNewCard,
         }),

frontend/src/metabase/redux/undo.js

@@ -129,6 +129,7 @@ export default function (state = [], { type, payload, error }) {
 
     const undo = {
       ...payload,
+      initialTimeout: payload.timeout,
       // normalize "action" to "actions"
       actions: payload.action ? [payload.action] : payload.actions || [],
       action: null,

frontend/src/metabase/redux/undo.unit.spec.ts

@@ -123,6 +123,20 @@ describe("metabase/redux/undo", () => {
     // undo is dismissed, timeout passed
     expect(store.getState().undo.length).toBe(0);
   });
+
+  it("should hide toast after timeout is passed", async () => {
+    const store = createMockStore();
+    const timeout = 1000;
+
+    store.dispatch(addUndo({ id: MOCK_ID, timeout }));
+
+    // await act is required to simulate store update on the next tick
+    await act(async () => {
+      jest.advanceTimersByTime(timeout);
+    });
+
+    expect(store.getState().undo.length).toBe(0);
+  });
 });
 
 const createMockStore = () => {