@oneuptime/common 11.7.2 → 11.7.4

package/UI/Components/Error/PageError.tsx

@@ -1,8 +1,6 @@
 import Navigation from "../../Utils/Navigation";
 import { ButtonStyleType } from "../Button/Button";
-import { IconType } from "../Icon/Icon";
 import Modal from "../Modal/Modal";
-import IconProp from "../../../Types/Icon/IconProp";
 import React, { FunctionComponent, ReactElement } from "react";
 
 export interface ComponentProps {
@@ -22,8 +20,6 @@ const PageError: FunctionComponent<ComponentProps> = (
   return (
     <Modal
       title={props.title || "Oops, something went wrong."}
-      icon={IconProp.Alert}
-      iconType={IconType.Danger}
       onSubmit={() => {
         Navigation.reload();
       }}

package/UI/Components/ErrorBoundary.tsx

@@ -1,30 +1,246 @@
-import React, { FunctionComponent, ReactElement } from "react";
-import { ErrorBoundary as NativeErrorBoundary } from "react-error-boundary";
+import React, { FunctionComponent, ReactElement, ReactNode } from "react";
+import {
+  ErrorBoundary as NativeErrorBoundary,
+  FallbackProps,
+} from "react-error-boundary";
 
 export interface ComponentProps {
-  children?: ReactElement;
+  children?: ReactNode;
+  /**
+   * When this value changes the boundary clears its error and re-renders its
+   * children. Pass the current route (pathname) so navigating away from a page
+   * that crashed recovers the app instead of stranding the user on the
+   * fallback until they reload.
+   */
+  resetKey?: string | undefined;
+  /** Notified for every caught error. Used by tests and by callers that report. */
+  onError?: ((error: Error) => void) | undefined;
 }
 
-const Fallback: FunctionComponent = () => {
+/**
+ * A code-split chunk that fails to download throws during render, and — with
+ * no boundary above it — takes the entire React tree down with it. This is the
+ * usual cause of an app that "sometimes" goes blank: a user holds a tab open
+ * across a deploy, the hashed chunk filenames they were served no longer
+ * exist, and the next lazy route they visit 404s.
+ *
+ * Browsers word this failure differently, hence the list.
+ */
+const CHUNK_LOAD_ERROR_PATTERNS: Array<RegExp> = [
+  /Loading chunk \S+ failed/i,
+  /Loading CSS chunk \S+ failed/i,
+  /ChunkLoadError/i,
+  /Failed to fetch dynamically imported module/i,
+  /error loading dynamically imported module/i,
+  /Importing a module script failed/i,
+  /Unable to preload CSS/i,
+];
+
+/** sessionStorage key holding the timestamp of the last chunk-error reload. */
+export const CHUNK_LOAD_RELOAD_STORAGE_KEY: string =
+  "oneuptime-chunk-load-reload-at";
+
+/**
+ * If a reload does not fix the chunk error, reloading again will not either.
+ * Only auto-reload when the last attempt is older than this, so a genuinely
+ * missing asset degrades to the fallback UI instead of a reload loop.
+ */
+export const CHUNK_LOAD_RELOAD_COOLDOWN_IN_MS: number = 30 * 1000;
+
+export type IsChunkLoadErrorFunction = (error: unknown) => boolean;
+
+export const isChunkLoadError: IsChunkLoadErrorFunction = (
+  error: unknown,
+): boolean => {
+  if (!error) {
+    return false;
+  }
+
+  const name: string =
+    typeof (error as Error).name === "string" ? (error as Error).name : "";
+  const message: string =
+    typeof (error as Error).message === "string"
+      ? (error as Error).message
+      : String(error);
+
+  const text: string = `${name} ${message}`;
+
+  return CHUNK_LOAD_ERROR_PATTERNS.some((pattern: RegExp) => {
+    return pattern.test(text);
+  });
+};
+
+export type HasRecentlyReloadedFunction = (now: number) => boolean;
+
+/**
+ * sessionStorage is unavailable in some privacy modes and throws on access, so
+ * every read/write here is best-effort. Failing to read is treated as "we have
+ * not reloaded yet" — one extra reload is better than a permanently broken page.
+ */
+export const hasRecentlyReloadedForChunkLoadError: HasRecentlyReloadedFunction =
+  (now: number): boolean => {
+    try {
+      const lastReloadedAt: string | null = window.sessionStorage.getItem(
+        CHUNK_LOAD_RELOAD_STORAGE_KEY,
+      );
+
+      if (!lastReloadedAt) {
+        return false;
+      }
+
+      const lastReloadedAtInMs: number = Number(lastReloadedAt);
+
+      if (!Number.isFinite(lastReloadedAtInMs)) {
+        return false;
+      }
+
+      return now - lastReloadedAtInMs < CHUNK_LOAD_RELOAD_COOLDOWN_IN_MS;
+    } catch {
+      return false;
+    }
+  };
+
+export type MarkChunkLoadErrorReloadFunction = (now: number) => void;
+
+export const markChunkLoadErrorReload: MarkChunkLoadErrorReloadFunction = (
+  now: number,
+): void => {
+  try {
+    window.sessionStorage.setItem(
+      CHUNK_LOAD_RELOAD_STORAGE_KEY,
+      now.toString(),
+    );
+  } catch {
+    // Storage is unavailable. The reload still happens, it just is not rate limited.
+  }
+};
+
+export type ReloadPageFunction = () => void;
+
+export const reloadPage: ReloadPageFunction = (): void => {
+  window.location.reload();
+};
+
+/**
+ * Recover from a stale-bundle error by reloading once. Returns true when a
+ * reload was triggered, so the caller knows the fallback is only transient.
+ */
+export type HandleChunkLoadErrorFunction = (error: unknown) => boolean;
+
+export const handleChunkLoadError: HandleChunkLoadErrorFunction = (
+  error: unknown,
+): boolean => {
+  if (!isChunkLoadError(error)) {
+    return false;
+  }
+
+  const now: number = Date.now();
+
+  if (hasRecentlyReloadedForChunkLoadError(now)) {
+    return false;
+  }
+
+  markChunkLoadErrorReload(now);
+  reloadPage();
+
+  return true;
+};
+
+export const Fallback: FunctionComponent<FallbackProps> = (
+  props: FallbackProps,
+): ReactElement => {
+  const errorMessage: string =
+    props.error && typeof props.error.message === "string"
+      ? props.error.message
+      : "";
+
   return (
     <div
-      id="app-loading"
+      role="alert"
+      data-testid="error-boundary-fallback"
       style={{
-        position: "fixed",
-        top: "0",
-        bottom: "0",
-        left: "0",
-        right: "0",
+        minHeight: "60vh",
+        width: "100%",
+        padding: "2rem",
         backgroundColor: "var(--ou-background-primary, #fdfdfd)",
         color: "var(--ou-text-primary, #111827)",
-        zIndex: "999",
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
+        textAlign: "center",
       }}
     >
-      <div>
-        An unexpected error has occurred. Please reload the page to continue
+      <div style={{ maxWidth: "32rem" }}>
+        <div style={{ fontWeight: 600, marginBottom: "0.5rem" }}>
+          An unexpected error has occurred. Please reload the page to continue
+        </div>
+        <div
+          style={{
+            fontSize: "0.875rem",
+            color: "var(--ou-text-secondary, #6b7280)",
+            marginBottom: "1.25rem",
+          }}
+        >
+          The rest of the app is still working. You can retry this page or
+          reload to start fresh.
+        </div>
+        <div
+          style={{
+            display: "flex",
+            gap: "0.75rem",
+            justifyContent: "center",
+          }}
+        >
+          <button
+            type="button"
+            data-testid="error-boundary-try-again"
+            onClick={() => {
+              props.resetErrorBoundary();
+            }}
+            style={{
+              padding: "0.5rem 1rem",
+              borderRadius: "0.375rem",
+              border: "1px solid var(--ou-border-primary, #d1d5db)",
+              backgroundColor: "transparent",
+              color: "inherit",
+              cursor: "pointer",
+            }}
+          >
+            Try again
+          </button>
+          <button
+            type="button"
+            data-testid="error-boundary-reload"
+            onClick={() => {
+              reloadPage();
+            }}
+            style={{
+              padding: "0.5rem 1rem",
+              borderRadius: "0.375rem",
+              border: "1px solid transparent",
+              backgroundColor: "var(--ou-brand-primary, #4f46e5)",
+              color: "#ffffff",
+              cursor: "pointer",
+            }}
+          >
+            Reload page
+          </button>
+        </div>
+        {errorMessage ? (
+          <div
+            data-testid="error-boundary-error-message"
+            style={{
+              marginTop: "1.25rem",
+              fontSize: "0.75rem",
+              color: "var(--ou-text-secondary, #6b7280)",
+              wordBreak: "break-word",
+            }}
+          >
+            {errorMessage}
+          </div>
+        ) : (
+          <></>
+        )}
       </div>
     </div>
   );
@@ -32,9 +248,30 @@ const Fallback: FunctionComponent = () => {
 
 const ErrorBoundary: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
-) => {
+): ReactElement => {
+  type OnErrorFunction = (error: Error) => void;
+
+  const onError: OnErrorFunction = (error: Error): void => {
+    /*
+     * Surface the error. Without this the only trace of a crash is the blank
+     * screen itself, because the boundary swallows what React would otherwise
+     * rethrow to window.onerror (and therefore to RUM).
+     */
+    // eslint-disable-next-line no-console
+    console.error("Uncaught error rendering the app:", error);
+
+    // A stale bundle recovers by reloading, so do that instead of blaming the user.
+    handleChunkLoadError(error);
+
+    props.onError?.(error);
+  };
+
   return (
-    <NativeErrorBoundary FallbackComponent={Fallback}>
+    <NativeErrorBoundary
+      FallbackComponent={Fallback}
+      onError={onError}
+      resetKeys={[props.resetKey]}
+    >
       {props.children}
     </NativeErrorBoundary>
   );

package/UI/Components/InfoCard/InfoCard.tsx

@@ -7,15 +7,72 @@ export interface ComponentProps {
   className?: string;
   textClassName?: string;
   onClick?: (() => void) | undefined;
+  /*
+   * Only meaningful alongside `onClick`: renders the card as a pressed toggle
+   * — outlined, and announced as such. Used by summary strips where clicking a
+   * tile narrows the table below it, so the tile has to show which subset the
+   * user is looking at.
+   *
+   * Leave it undefined on a card that navigates instead of toggling. Most
+   * clickable InfoCards in the product are one-way links, and announcing one
+   * as an unpressed toggle promises a state that activating it never produces.
+   */
+  isSelected?: boolean | undefined;
+  // Announced in place of the title when the card is clickable.
+  ariaLabel?: string | undefined;
 }
 
 const InfoCard: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const isClickable: boolean = Boolean(props.onClick);
+
+  /*
+   * A selected card swaps its border rather than adding one: Tailwind emits
+   * both border-color utilities at the same specificity, so stacking them
+   * leaves the winner up to stylesheet order.
+   */
+  const borderClassName: string =
+    isClickable && props.isSelected
+      ? "border-indigo-500 ring-1 ring-indigo-500"
+      : "border-gray-200";
+
   return (
     <div
       onClick={props.onClick}
-      className={`rounded-xl bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow duration-200 p-5 ${props.onClick ? "cursor-pointer" : ""} ${props.className || ""}`}
+      /*
+       * Click handlers on a div are invisible to the keyboard and to screen
+       * readers. Everything below turns a clickable card into a real toggle
+       * button; a card with no handler is left as the plain container it is.
+       */
+      role={isClickable ? "button" : undefined}
+      tabIndex={isClickable ? 0 : undefined}
+      /*
+       * Gated on the prop being supplied, not merely on clickability: the
+       * cards that were already clickable before toggles existed (the Home
+       * overview stats, the Kubernetes and Proxmox summaries) all navigate,
+       * and `aria-pressed="false"` would announce each of them as a toggle
+       * that is currently off — a state activating it never reaches.
+       */
+      aria-pressed={
+        isClickable && props.isSelected !== undefined
+          ? Boolean(props.isSelected)
+          : undefined
+      }
+      aria-label={isClickable ? props.ariaLabel : undefined}
+      onKeyDown={
+        isClickable
+          ? (event: React.KeyboardEvent<HTMLDivElement>) => {
+              if (event.key !== "Enter" && event.key !== " ") {
+                return;
+              }
+              // Space scrolls the page unless the default is taken away.
+              event.preventDefault();
+              props.onClick?.();
+            }
+          : undefined
+      }
+      className={`rounded-xl bg-white border ${borderClassName} shadow-sm hover:shadow-md transition-shadow duration-200 p-5 ${isClickable ? "cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2" : ""} ${props.className || ""}`}
     >
       <div className="mb-2">
         <FieldLabelElement title={props.title} />

package/UI/Components/LogsViewer/components/LogTimeRangePicker.tsx

@@ -14,12 +14,20 @@ import InBetween from "../../../../Types/BaseDatabase/InBetween";
 import StartAndEndDate, {
   StartAndEndDateType,
 } from "../../Date/StartAndEndDate";
+import {
+  DropdownHorizontalAlignment,
+  getDropdownAlignmentClassName,
+  useDropdownHorizontalAlignment,
+} from "../../../Utils/DropdownAlignment";
 
 export interface LogTimeRangePickerProps {
   value: RangeStartAndEndDateTime;
   onChange: (value: RangeStartAndEndDateTime) => void;
 }
 
+// Matches the Tailwind `w-72` on the dropdown below (18rem).
+export const LOG_TIME_RANGE_DROPDOWN_WIDTH_IN_PX: number = 288;
+
 // Preset options to show in the dropdown (ordered for log investigation use)
 const PRESET_OPTIONS: Array<{ range: TimeRange; label: string }> = [
   { range: TimeRange.PAST_FIVE_MINS, label: "Past 5 Minutes" },
@@ -68,6 +76,20 @@ const LogTimeRangePicker: FunctionComponent<LogTimeRangePickerProps> = (
   const containerRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(
     null!,
   );
+  const buttonRef: React.RefObject<HTMLButtonElement> =
+    useRef<HTMLButtonElement>(null!);
+  const dropdownRef: React.RefObject<HTMLDivElement> = useRef<HTMLDivElement>(
+    null!,
+  );
+
+  const alignment: DropdownHorizontalAlignment = useDropdownHorizontalAlignment(
+    {
+      isOpen: isOpen,
+      anchorRef: buttonRef,
+      dropdownRef: dropdownRef,
+      dropdownWidthInPx: LOG_TIME_RANGE_DROPDOWN_WIDTH_IN_PX,
+    },
+  );
 
   // Close on click outside
   useEffect(() => {
@@ -120,7 +142,11 @@ const LogTimeRangePicker: FunctionComponent<LogTimeRangePickerProps> = (
   return (
     <div ref={containerRef} className="relative">
       <button
+        ref={buttonRef}
         type="button"
+        data-testid="log-time-range-picker-button"
+        aria-haspopup="true"
+        aria-expanded={isOpen}
         className={`inline-flex items-center gap-1.5 rounded-md border px-2.5 py-1.5 text-xs font-medium shadow-sm transition-colors ${
           isOpen
             ? "border-indigo-300 bg-indigo-50 text-indigo-700"
@@ -139,7 +165,14 @@ const LogTimeRangePicker: FunctionComponent<LogTimeRangePickerProps> = (
       </button>
 
       {isOpen && (
-        <div className="absolute right-0 top-full z-50 mt-1 w-72 rounded-lg border border-gray-200 bg-white shadow-lg">
+        <div
+          ref={dropdownRef}
+          data-testid="log-time-range-picker-dropdown"
+          data-align={alignment}
+          className={`absolute ${getDropdownAlignmentClassName(
+            alignment,
+          )} top-full z-50 mt-1 w-72 max-w-[calc(100vw-1rem)] rounded-lg border border-gray-200 bg-white shadow-lg`}
+        >
           {/* Preset options */}
           <div className="max-h-64 overflow-y-auto py-1">
             {PRESET_OPTIONS.map(

package/UI/Components/MasterPage/MasterPage.tsx

@@ -27,6 +27,70 @@ const MasterPage: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   const [isOnline, setIsOnline] = React.useState(true);
+  const topSectionRef: React.RefObject<HTMLDivElement> =
+    React.useRef<HTMLDivElement>(null);
+
+  /*
+   * Publish the sticky top section's height as --app-header-height so anything
+   * that sticks underneath it (the side menu, for example) can offset itself by
+   * the real header instead of guessing and ending up tucked behind it. The
+   * height is not a constant — it changes when the navbar is hidden, when the
+   * header wraps on narrow viewports and when top alerts appear — so keep it in
+   * sync rather than measuring once.
+   */
+  React.useLayoutEffect(() => {
+    const setHeaderHeight: (height: number) => void = (
+      height: number,
+    ): void => {
+      document.documentElement.style.setProperty(
+        "--app-header-height",
+        `${height}px`,
+      );
+    };
+
+    const element: HTMLDivElement | null = topSectionRef.current;
+
+    if (!element || props.makeTopSectionUnstick) {
+      // Nothing is overlaying the content, so no offset is needed.
+      setHeaderHeight(0);
+      return undefined;
+    }
+
+    const measure: () => void = (): void => {
+      setHeaderHeight(element.offsetHeight);
+    };
+
+    measure();
+
+    /*
+     * ResizeObserver is missing in jsdom and in older browsers, so fall back to
+     * resize events there — less precise, but the header only really changes
+     * height when the viewport does.
+     */
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", measure);
+
+      return () => {
+        window.removeEventListener("resize", measure);
+        document.documentElement.style.removeProperty("--app-header-height");
+      };
+    }
+
+    const observer: ResizeObserver = new ResizeObserver(measure);
+    observer.observe(element);
+
+    return () => {
+      observer.disconnect();
+      document.documentElement.style.removeProperty("--app-header-height");
+    };
+  }, [
+    props.makeTopSectionUnstick,
+    props.hideHeader,
+    props.isLoading,
+    props.error,
+    props.disableMainContentWrapper,
+    isOnline,
+  ]);
 
   if (props.isLoading) {
     return (
@@ -62,6 +126,7 @@ const MasterPage: FunctionComponent<ComponentProps> = (
             </a>
           )}
           <div
+            ref={topSectionRef}
             className={props.makeTopSectionUnstick ? "" : "sticky top-0 z-10"}
           >
             <TopSection

package/UI/Components/Modal/Modal.tsx

@@ -1,6 +1,6 @@
 import { ButtonStyleType } from "../Button/Button";
 import ButtonType from "../Button/ButtonTypes";
-import Icon, { IconType, SizeProp, ThickProp } from "../Icon/Icon";
+import Icon from "../Icon/Icon";
 import Loader, { LoaderType } from "../Loader/Loader";
 import ModalBody from "./ModalBody";
 import ModalFooter from "./ModalFooter";
@@ -35,8 +35,6 @@ export interface ComponentProps {
   disableSubmitButton?: undefined | boolean;
   error?: string | undefined;
   isBodyLoading?: boolean | undefined;
-  icon?: IconProp | undefined;
-  iconType?: IconType | undefined;
   modalWidth?: ModalWidth | undefined;
   rightElement?: ReactElement | undefined;
   closeButtonText?: string | undefined;
@@ -172,28 +170,6 @@ const Modal: FunctionComponent<ComponentProps> = (
     };
   }, []);
 
-  let iconBgColor: string = "bg-indigo-50";
-  let iconColor: string = "text-indigo-600";
-  let iconRingColor: string = "ring-indigo-100";
-
-  if (props.iconType === IconType.Info) {
-    iconBgColor = "bg-indigo-50";
-    iconColor = "text-indigo-600";
-    iconRingColor = "ring-indigo-100";
-  } else if (props.iconType === IconType.Warning) {
-    iconBgColor = "bg-yellow-50";
-    iconColor = "text-yellow-700";
-    iconRingColor = "ring-yellow-100";
-  } else if (props.iconType === IconType.Success) {
-    iconBgColor = "bg-green-50";
-    iconColor = "text-green-600";
-    iconRingColor = "ring-green-100";
-  } else if (props.iconType === IconType.Danger) {
-    iconBgColor = "bg-red-50";
-    iconColor = "text-red-600";
-    iconRingColor = "ring-red-100";
-  }
-
   let modalWidthClassName: string = "sm:max-w-lg md:max-w-lg";
 
   if (props.modalWidth === ModalWidth.Medium) {
@@ -224,46 +200,26 @@ const Modal: FunctionComponent<ComponentProps> = (
           >
             <div className="relative flex shrink-0 flex-col gap-4 rounded-t-2xl border-b border-gray-100 bg-white px-5 py-4 sm:flex-row sm:items-start sm:justify-between sm:gap-6 sm:rounded-t-xl sm:px-6">
               <div
-                className={`flex min-w-0 flex-1 items-start gap-3 ${
+                className={`min-w-0 flex-1 ${
                   props.onClose ? "pr-9 sm:pr-0" : ""
                 }`}
               >
-                {props.icon && (
-                  <div
-                    className={`flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg ${iconBgColor} ring-1 ring-inset ${iconRingColor}`}
-                    data-testid="icon"
+                <h3
+                  data-testid="modal-title"
+                  className="text-base font-semibold leading-6 tracking-tight text-gray-900"
+                  id={titleId}
+                >
+                  {translatedTitle}
+                </h3>
+                {translatedDescription && (
+                  <p
+                    id={descriptionId}
+                    data-testid="modal-description"
+                    className="mt-0.5 text-sm leading-5 text-gray-500"
                   >
-                    <Icon
-                      thick={ThickProp.Thick}
-                      type={
-                        props.iconType === undefined
-                          ? IconType.Info
-                          : props.iconType
-                      }
-                      className={`${iconColor} h-5 w-5`}
-                      icon={props.icon}
-                      size={SizeProp.Five}
-                    />
-                  </div>
+                    {translatedDescription}
+                  </p>
                 )}
-                <div className="min-w-0 flex-1">
-                  <h3
-                    data-testid="modal-title"
-                    className="text-base font-semibold leading-6 tracking-tight text-gray-900"
-                    id={titleId}
-                  >
-                    {translatedTitle}
-                  </h3>
-                  {translatedDescription && (
-                    <p
-                      id={descriptionId}
-                      data-testid="modal-description"
-                      className="mt-0.5 text-sm leading-5 text-gray-500"
-                    >
-                      {translatedDescription}
-                    </p>
-                  )}
-                </div>
               </div>
               {props.rightElement && (
                 <div

package/UI/Components/ModelFormModal/ModelFormModal.tsx

@@ -7,10 +7,8 @@ import ModelForm, {
   ComponentProps as ModelFormComponentProps,
 } from "../Forms/ModelForm";
 import FormValues from "../Forms/Types/FormValues";
-import { IconType } from "../Icon/Icon";
 import Modal, { ModalWidth } from "../Modal/Modal";
 import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
-import IconProp from "../../../Types/Icon/IconProp";
 import { JSONObject } from "../../../Types/JSON";
 import ObjectID from "../../../Types/ObjectID";
 import React, { MutableRefObject, ReactElement, useRef, useState } from "react";
@@ -33,12 +31,6 @@ export interface ComponentProps<TBaseModel extends BaseModel> {
     | ((item: TBaseModel, miscDataProps: JSONObject) => Promise<TBaseModel>)
     | undefined;
   footer?: ReactElement | undefined;
-  /*
-   * A header icon (rendered in a colored circle) to make the modal feel
-   * purpose-built. Forwarded to the underlying <Modal> via the props spread.
-   */
-  icon?: IconProp | undefined;
-  iconType?: IconType | undefined;
   formRef?: undefined | MutableRefObject<FormProps<FormValues<TBaseModel>>>;
 }