@oneuptime/common 12.0.23 → 12.0.24

package/Tests/UI/Components/Toast.test.tsx

@@ -1,197 +0,0 @@
-import Toast, { ToastType } from "../../../UI/Components/Toast/Toast";
-import "@testing-library/jest-dom";
-import {
-  act,
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { UserEvent } from "@testing-library/user-event/dist/types/setup/setup";
-import * as React from "react";
-import { describe, expect, jest, test } from "@jest/globals";
-
-/*
- * The toast mounts closed (faded, nudged down) and opens on the next
- * animation frame, so anything asserting the settled look has to let that
- * frame run first — the same choreography Modal.test.tsx flushes.
- */
-type FlushEntranceFrameFunction = () => Promise<void>;
-
-const flushEntranceFrame: FlushEntranceFrameFunction =
-  async (): Promise<void> => {
-    await act(async () => {
-      await new Promise<void>((resolve: () => void) => {
-        requestAnimationFrame(() => {
-          resolve();
-        });
-      });
-    });
-  };
-
-describe("Test for Toast.tsx", () => {
-  test("should render the toast card", () => {
-    render(
-      <Toast type={ToastType.SUCCESS} title="Spread" description="Love" />,
-    );
-
-    /*
-     * The card itself, not a fixed strip: positioning now belongs to the ONE
-     * region container ToastInit renders (see ToastStacking.test.tsx), so
-     * stacked toasts no longer paint on top of each other at top-0.
-     */
-    const toast: HTMLElement = screen.getByTestId("toast");
-
-    expect(toast).toHaveClass(
-      "pointer-events-auto",
-      "w-full",
-      "max-w-sm",
-      "rounded-lg",
-      "bg-white",
-      "shadow-lg",
-    );
-    expect(toast).not.toHaveClass("fixed");
-  });
-
-  test("enters by fading and lifting in from a closed state", async () => {
-    render(
-      <Toast type={ToastType.SUCCESS} title="Spread" description="Love" />,
-    );
-
-    const toast: HTMLElement = screen.getByTestId("toast");
-
-    expect(toast).toHaveClass("opacity-0", "translate-y-2");
-
-    await flushEntranceFrame();
-
-    expect(toast).toHaveClass("opacity-100");
-    /*
-     * A settled toast carries no transform class — a lingering translate
-     * would make the card the containing block for position:fixed
-     * descendants.
-     */
-    expect(toast.className).not.toMatch(/(^|\s)(scale|translate)-/);
-  });
-
-  test("should have close button", () => {
-    render(
-      <Toast type={ToastType.SUCCESS} title="Spread" description="Love" />,
-    );
-    expect(screen.getByTestId("close-button")).toBeInTheDocument();
-  });
-
-  test("Checking Title", () => {
-    render(
-      <Toast type={ToastType.SUCCESS} title="Spread" description="Love" />,
-    );
-    expect(screen.getByTestId("title")).toHaveTextContent("Spread");
-  });
-
-  test("Checking Description", () => {
-    render(
-      <Toast type={ToastType.SUCCESS} title="Spread" description="Love" />,
-    );
-    expect(screen.getByTestId("description")).toHaveTextContent("Love");
-  });
-
-  test("Checking if Toast is for SUCCESS", () => {
-    render(
-      <Toast type={ToastType.SUCCESS} title="Spread" description="Love" />,
-    );
-    expect(screen.getByTestId("toast-icon")).toHaveClass("text-green-400");
-  });
-  test("Checking if Toast is for INFO", () => {
-    render(<Toast type={ToastType.INFO} title="Spread" description="Love" />);
-    expect(screen.getByTestId("toast-icon")).toHaveClass("text-blue-400");
-  });
-
-  test("Checking if Toast is for Warning", () => {
-    render(
-      <Toast type={ToastType.WARNING} title="Spread" description="Love" />,
-    );
-    expect(screen.getByTestId("toast-icon")).toHaveClass("text-yellow-400");
-  });
-
-  test("Checking if Toast is for Normal", () => {
-    render(<Toast type={ToastType.NORMAL} title="Spread" description="Love" />);
-    expect(screen.getByTestId("toast-icon")).toHaveClass("text-gray-400");
-  });
-
-  test("clicking close fades the toast out and only then unmounts it", async () => {
-    const user: UserEvent = userEvent.setup();
-
-    render(
-      <Toast type={ToastType.SUCCESS} title="Spread" description="Love" />,
-    );
-
-    await flushEntranceFrame();
-
-    const closeButton: HTMLButtonElement = screen.getByTestId("close-button");
-    await user.click(closeButton);
-
-    /*
-     * The exit runs as a fade with a delayed unmount, so immediately after
-     * the click the card is still mounted, at zero opacity.
-     */
-    expect(screen.getByTestId("toast")).toHaveClass("opacity-0");
-
-    await waitFor(() => {
-      expect(screen.queryByTestId("toast")).toBeFalsy();
-    });
-  });
-
-  /*
-   * Owners (ToastInit) may hand the toast a NEW onClose identity on any
-   * re-render. The exit timer must not restart because of that — it keys off
-   * isLeaving alone and reads the latest onClose through a ref — otherwise a
-   * re-render mid-fade would leave an invisible pointer-events-auto card
-   * intercepting clicks past the original deadline.
-   */
-  test("a re-render with a new onClose mid-exit neither restarts the timer nor calls a stale handler", () => {
-    jest.useFakeTimers();
-
-    try {
-      const staleOnClose: () => void = jest.fn();
-      const latestOnClose: () => void = jest.fn();
-
-      const { rerender } = render(
-        <Toast
-          type={ToastType.SUCCESS}
-          title="Spread"
-          description="Love"
-          onClose={staleOnClose}
-        />,
-      );
-
-      fireEvent.click(screen.getByTestId("close-button"));
-
-      // 100ms into the 150ms exit fade the owner re-renders the toast…
-      act(() => {
-        jest.advanceTimersByTime(100);
-      });
-      rerender(
-        <Toast
-          type={ToastType.SUCCESS}
-          title="Spread"
-          description="Love"
-          onClose={latestOnClose}
-        />,
-      );
-
-      // …the card is still mid-fade…
-      expect(screen.getByTestId("toast")).toHaveClass("opacity-0");
-
-      // …and the ORIGINAL 150ms deadline still unmounts it 50ms later.
-      act(() => {
-        jest.advanceTimersByTime(50);
-      });
-
-      expect(screen.queryByTestId("toast")).toBeFalsy();
-      expect(latestOnClose).toHaveBeenCalledTimes(1);
-      expect(staleOnClose).not.toHaveBeenCalled();
-    } finally {
-      jest.useRealTimers();
-    }
-  });
-});

package/Tests/UI/Components/ToastStacking.test.tsx

@@ -1,198 +0,0 @@
-import ToastLayout, {
-  ShowToastNotification,
-} from "../../../UI/Components/Toast/ToastInit";
-import { ToastType } from "../../../UI/Components/Toast/Toast";
-import "@testing-library/jest-dom";
-import {
-  act,
-  cleanup,
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-} from "@testing-library/react";
-import React from "react";
-import { afterEach, describe, expect, jest, test } from "@jest/globals";
-
-/*
- * ToastInit used to render every toast as its own fixed strip at top-0 (the
- * index prop that was supposed to offset them was never passed), so stacked
- * toasts painted on top of each other and only the last one was readable.
- * The contract pinned here: ONE fixed region, cards stacked in a flex column
- * in insertion order.
- */
-
-type ShowToastFunction = (title: string, onClose?: () => void) => void;
-
-const showToast: ShowToastFunction = (
-  title: string,
-  onClose?: () => void,
-): void => {
-  act(() => {
-    ShowToastNotification({
-      title,
-      description: `${title} description`,
-      type: ToastType.SUCCESS,
-      onClose,
-    });
-  });
-};
-
-describe("Toast stacking", () => {
-  afterEach(() => {
-    cleanup();
-    jest.clearAllMocks();
-  });
-
-  test("renders one fixed region that keeps its slot in the z-index ladder", () => {
-    render(<ToastLayout />);
-
-    const region: HTMLElement = screen.getByTestId("toast-region");
-
-    /*
-     * z-40 is deliberate: above SideOver (z-30), below Modal (z-50). The
-     * region itself takes no pointer events; only the cards inside do.
-     */
-    expect(region).toHaveClass(
-      "pointer-events-none",
-      "fixed",
-      "z-40",
-      "top-0",
-      "left-0",
-      "right-0",
-    );
-    expect(region).toHaveClass("sm:items-start", "sm:p-6");
-    expect(region).toHaveAttribute("aria-live", "assertive");
-  });
-
-  test("stacks multiple toasts in one region, in insertion order", () => {
-    render(<ToastLayout />);
-
-    showToast("First");
-    showToast("Second");
-    showToast("Third");
-
-    const toasts: Array<HTMLElement> = screen.getAllByTestId("toast");
-
-    expect(toasts).toHaveLength(3);
-
-    // All three cards live inside the ONE region, not three fixed strips.
-    const region: HTMLElement = screen.getByTestId("toast-region");
-
-    for (const toast of toasts) {
-      expect(region).toContainElement(toast);
-      expect(toast).not.toHaveClass("fixed");
-    }
-
-    // The stack is a flex column with a gap, so cards never overlap.
-    const stack: HTMLElement = toasts[0]?.parentElement as HTMLElement;
-
-    expect(stack).toHaveClass("flex", "flex-col", "gap-4");
-    expect(toasts[1]?.parentElement).toBe(stack);
-    expect(toasts[2]?.parentElement).toBe(stack);
-
-    const titles: Array<string | null> = screen
-      .getAllByTestId("title")
-      .map((title: HTMLElement) => {
-        return title.textContent;
-      });
-
-    expect(titles).toEqual(["First", "Second", "Third"]);
-  });
-
-  test("dismissing one toast removes only that toast and calls its onClose", async () => {
-    const onCloseFirst: () => void = jest.fn();
-
-    render(<ToastLayout />);
-
-    showToast("First", onCloseFirst);
-    showToast("Second");
-
-    const closeButtons: Array<HTMLElement> =
-      screen.getAllByTestId("close-button");
-
-    expect(closeButtons).toHaveLength(2);
-
-    fireEvent.click(closeButtons[0] as HTMLElement);
-
-    /*
-     * The exit fade delays the unmount, so removal is awaited rather than
-     * asserted synchronously.
-     */
-    await waitFor(() => {
-      expect(screen.getAllByTestId("toast")).toHaveLength(1);
-    });
-
-    expect(onCloseFirst).toHaveBeenCalledTimes(1);
-    expect(screen.getByTestId("title")).toHaveTextContent("Second");
-  });
-
-  test("a toast dispatched after a dismissal still stacks below the survivors", async () => {
-    render(<ToastLayout />);
-
-    showToast("First");
-    showToast("Second");
-
-    fireEvent.click(screen.getAllByTestId("close-button")[0] as HTMLElement);
-
-    await waitFor(() => {
-      expect(screen.getAllByTestId("toast")).toHaveLength(1);
-    });
-
-    showToast("Third");
-
-    const titles: Array<string | null> = screen
-      .getAllByTestId("title")
-      .map((title: HTMLElement) => {
-        return title.textContent;
-      });
-
-    expect(titles).toEqual(["Second", "Third"]);
-  });
-
-  /*
-   * Regression: dispatching a toast re-renders the whole stack, and the
-   * layout used to hand every card a freshly created onClose on each render.
-   * A dismissed card mid-exit-fade saw the new prop, cleared its unmount
-   * timer, and re-armed it — so a burst of toasts could keep an invisible
-   * pointer-events-auto card alive indefinitely, intercepting clicks.
-   */
-  test("a toast dispatched during another toast's exit fade does not restart its unmount timer", () => {
-    jest.useFakeTimers();
-
-    try {
-      const onCloseFirst: () => void = jest.fn();
-
-      render(<ToastLayout />);
-
-      showToast("First", onCloseFirst);
-
-      fireEvent.click(screen.getByTestId("close-button"));
-
-      // 100ms into the 150ms exit fade a second toast re-renders the stack.
-      act(() => {
-        jest.advanceTimersByTime(100);
-      });
-      showToast("Second");
-
-      expect(screen.getAllByTestId("toast")).toHaveLength(2);
-
-      // The ORIGINAL 150ms deadline holds: 50ms later the first card is gone.
-      act(() => {
-        jest.advanceTimersByTime(50);
-      });
-
-      expect(onCloseFirst).toHaveBeenCalledTimes(1);
-
-      const titles: Array<string | null> = screen
-        .getAllByTestId("title")
-        .map((title: HTMLElement) => {
-          return title.textContent;
-        });
-
-      expect(titles).toEqual(["Second"]);
-    } finally {
-      jest.useRealTimers();
-    }
-  });
-});

package/UI/Components/Toast/Toast.tsx

@@ -1,189 +0,0 @@
-import React, {
-  FunctionComponent,
-  ReactElement,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import Icon from "../Icon/Icon";
-import IconProp from "../../../Types/Icon/IconProp";
-import useTranslateValue from "../../Utils/Translation";
-
-export enum ToastType {
-  DANGER,
-  SUCCESS,
-  INFO,
-  WARNING,
-  NORMAL,
-}
-
-export interface ComponentProps {
-  title: string;
-  description: string;
-  onClose?: undefined | (() => void);
-  type?: undefined | ToastType;
-  icon?: IconProp | undefined;
-}
-
-/* How long the exit fade runs before the toast actually unmounts. */
-const EXIT_DURATION_IN_MS: number = 150;
-
-const Component: FunctionComponent<ComponentProps> = (
-  props: ComponentProps,
-): ReactElement => {
-  const { translateString } = useTranslateValue();
-  const [show, setShow] = useState<boolean>(true);
-
-  /*
-   * The toast is mounted in its closed state (faded, nudged down) and flipped
-   * open one frame later so the browser has something to transition from —
-   * the same pattern Modal uses for its entrance.
-   */
-  const [hasEntered, setHasEntered] = useState<boolean>(false);
-
-  /*
-   * Dismissal fades the card out first and only unmounts (and notifies the
-   * owner) once the fade has finished, so the toast never blinks away.
-   */
-  const [isLeaving, setIsLeaving] = useState<boolean>(false);
-
-  useEffect(() => {
-    const open: () => void = (): void => {
-      setHasEntered(true);
-    };
-
-    const frame: number = requestAnimationFrame(open);
-
-    /*
-     * A hidden or throttled tab never runs an animation frame; the timer
-     * skips the transition rather than leaving the toast at zero opacity.
-     */
-    const fallbackTimer: ReturnType<typeof setTimeout> = setTimeout(open, 80);
-
-    return () => {
-      cancelAnimationFrame(frame);
-      clearTimeout(fallbackTimer);
-    };
-  }, []);
-
-  /*
-   * The latest onClose lives in a ref so the exit effect can depend on
-   * isLeaving alone. Owners may recreate onClose every render, and a dep on
-   * it would restart the unmount timer whenever a sibling toast re-renders
-   * the stack mid-exit — leaving an invisible pointer-events-auto card
-   * intercepting clicks past its original deadline.
-   */
-  const onCloseRef: React.MutableRefObject<(() => void) | undefined> = useRef<
-    (() => void) | undefined
-  >(props.onClose);
-  onCloseRef.current = props.onClose;
-
-  useEffect(() => {
-    if (!isLeaving) {
-      return undefined;
-    }
-
-    const exitTimer: ReturnType<typeof setTimeout> = setTimeout(() => {
-      setShow(false);
-      if (onCloseRef.current) {
-        onCloseRef.current();
-      }
-    }, EXIT_DURATION_IN_MS);
-
-    return () => {
-      clearTimeout(exitTimer);
-    };
-  }, [isLeaving]);
-
-  let typeCssClass: string = "text-gray-400";
-  let iconType: IconProp = IconProp.Info;
-
-  if (props.type === ToastType.NORMAL) {
-    typeCssClass = "text-gray-400";
-    iconType = IconProp.Info;
-  }
-  if (props.type === ToastType.DANGER) {
-    typeCssClass = "text-red-400";
-    iconType = IconProp.Error;
-  }
-  if (props.type === ToastType.WARNING) {
-    typeCssClass = "text-yellow-400";
-    iconType = IconProp.Alert;
-  }
-  if (props.type === ToastType.SUCCESS) {
-    typeCssClass = "text-green-400";
-    iconType = IconProp.CheckCircle;
-  }
-  if (props.type === ToastType.INFO) {
-    typeCssClass = "text-blue-400";
-    iconType = IconProp.Info;
-  }
-
-  if (props.icon) {
-    iconType = props.icon;
-  }
-
-  /*
-   * Settled state carries no transform class at all — leaving a translate on
-   * the card would make it the containing block for position:fixed
-   * descendants (the Modal invariant).
-   */
-  let motionClassName: string = "translate-y-2 opacity-0";
-
-  if (isLeaving) {
-    motionClassName = "opacity-0";
-  } else if (hasEntered) {
-    motionClassName = "opacity-100";
-  }
-
-  if (show) {
-    return (
-      <div
-        data-testid="toast"
-        className={`pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white shadow-lg ring-1 ring-black ring-opacity-5 transition duration-150 ease-out motion-reduce:transition-none ${motionClassName}`}
-      >
-        <div className="p-4">
-          <div className="flex items-start">
-            <div className="flex-shrink-0">
-              <Icon
-                className={`h-6 w-6 ${typeCssClass}`}
-                data-testid="toast-icon"
-                icon={iconType}
-              />
-            </div>
-            <div className="ml-3 w-0 flex-1 pt-0.5">
-              <p
-                data-testid="title"
-                className="text-sm font-medium text-gray-900"
-              >
-                {translateString(props.title)}
-              </p>
-              <p
-                data-testid="description"
-                className="mt-1 text-sm text-gray-500"
-              >
-                {translateString(props.description)}
-              </p>
-            </div>
-            <div className="ml-4 flex flex-shrink-0">
-              <button
-                onClick={() => {
-                  setIsLeaving(true);
-                }}
-                data-testid="close-button"
-                type="button"
-                className="inline-flex rounded-md bg-white text-gray-400 transition-colors duration-150 ease-out hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
-              >
-                <span className="sr-only">Close</span>
-                <Icon className={`h-5 w-5`} icon={IconProp.Close} />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-  return <></>;
-};
-
-export default Component;

package/UI/Components/Toast/ToastInit.tsx

@@ -1,110 +0,0 @@
-import React, {
-  FunctionComponent,
-  ReactElement,
-  useEffect,
-  useRef,
-} from "react";
-import Toast, { ComponentProps as ToastComponentProps } from "./Toast";
-import GlobalEvents from "../../Utils/GlobalEvents";
-
-type ShowToastNotificationFunction = (toast: ToastComponentProps) => void;
-
-export const ShowToastNotification: ShowToastNotificationFunction = (
-  toast: ToastComponentProps,
-): void => {
-  GlobalEvents.dispatchEvent("toast", toast as any);
-};
-
-/*
- * Each queued toast gets a stable id so removals key correctly — keying by
- * array index would re-key (and so re-mount and re-animate) every toast below
- * the one that was dismissed.
- */
-interface ToastEntry {
-  id: number;
-  toast: ToastComponentProps;
-  /*
-   * Built once at dispatch and stable for the toast's lifetime: recreating
-   * onClose per render would hand every Toast a fresh prop on each stack
-   * re-render, which used to restart the exit-unmount timer of any toast
-   * mid-fade.
-   */
-  onClose: () => void;
-}
-
-const ToastLayout: FunctionComponent = (): ReactElement => {
-  const [currentToasts, setCurrentToasts] = React.useState<Array<ToastEntry>>(
-    [],
-  );
-  const nextToastIdRef: React.MutableRefObject<number> = useRef<number>(0);
-
-  useEffect(() => {
-    const addToastNotification: (event: CustomEvent) => void = (
-      event: CustomEvent,
-    ): void => {
-      const toast: ToastComponentProps = event.detail;
-      const id: number = nextToastIdRef.current;
-      nextToastIdRef.current += 1;
-
-      // setCurrentToasts is stable, so this closure never goes stale.
-      const onClose: () => void = (): void => {
-        if (toast.onClose) {
-          toast.onClose();
-        }
-
-        setCurrentToasts((toasts: Array<ToastEntry>) => {
-          return toasts.filter((candidate: ToastEntry) => {
-            return candidate.id !== id;
-          });
-        });
-      };
-
-      /*
-       * Functional update: this listener is registered once, so reading
-       * currentToasts from its closure would always see the mount-time empty
-       * array and every new toast would clobber the ones before it.
-       */
-      setCurrentToasts((toasts: Array<ToastEntry>) => {
-        return [...toasts, { id, toast, onClose }];
-      });
-    };
-
-    GlobalEvents.addEventListener("toast", addToastNotification);
-
-    return () => {
-      GlobalEvents.removeEventListener("toast", addToastNotification);
-    };
-  }, []);
-
-  /*
-   * ONE fixed container for every toast. Each toast used to render its own
-   * fixed strip at top-0 (the index prop that offset them was never passed),
-   * so stacked toasts painted on top of each other. A single region stacking
-   * cards with flex-col gap makes the order self-evident and keeps the
-   * z-index ladder in exactly one place (Toast z-40, under Modal z-50).
-   */
-  return (
-    <div
-      data-testid="toast-region"
-      aria-live="assertive"
-      className="pointer-events-none fixed z-40 top-0 left-0 right-0 flex items-end px-4 py-6 sm:items-start sm:p-6"
-    >
-      <div className="flex w-full flex-col items-center gap-4 sm:items-end">
-        {currentToasts.map((entry: ToastEntry) => {
-          return (
-            <Toast
-              key={entry.id}
-              title={entry.toast.title}
-              description={entry.toast.description}
-              type={entry.toast.type}
-              icon={entry.toast.icon}
-              onClose={entry.onClose}
-            />
-          );
-        })}
-      </div>
-    </div>
-  );
-};
-
-export default ToastLayout;