@oneuptime/common 12.0.4 → 12.0.6

package/UI/Components/Icon/Icon.tsx

@@ -388,7 +388,16 @@ const Icon: FunctionComponent<ComponentProps> = ({
         d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9"
       />,
     );
-  } else if (icon === IconProp.Pencil) {
+  } else if (icon === IconProp.Pencil || icon === IconProp.Edit) {
+    /*
+     * Edit is a pencil, and nothing else. It used to be a pencil drawn over a
+     * document outline, which at the 16px this icon is actually rendered at
+     * almost everywhere collapsed into a grey box with a diagonal through it -
+     * legible as "some kind of file thing", not as "change this". The pencil
+     * alone is what everybody already reads as edit, and it survives being
+     * small. IconProp.PencilSquare still draws the composite for the handful of
+     * places that want it.
+     */
     return getSvgWrapper(
       <path
         strokeLinecap="round"
@@ -1110,14 +1119,6 @@ const Icon: FunctionComponent<ComponentProps> = ({
         d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88"
       />,
     );
-  } else if (icon === IconProp.Edit) {
-    return getSvgWrapper(
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10"
-      />,
-    );
   } else if (icon === IconProp.True) {
     return getSvgWrapper(
       <path

package/UI/Components/Modal/ConfirmModal.tsx

@@ -46,9 +46,14 @@ const ConfirmModal: FunctionComponent<ComponentProps> = (
       }
       error={props.error}
     >
+      {/*
+       * The modal body is already the scroll container. A second one here gave
+       * a long confirmation two nested scrollbars, and the inner one clipped
+       * the text well short of the space the modal had spare.
+       */}
       <div
         data-testid="confirm-modal-description"
-        className="max-h-96 overflow-y-auto whitespace-pre-wrap break-words pr-1 text-sm leading-6 text-gray-600"
+        className="whitespace-pre-wrap break-words text-sm leading-6 text-gray-600"
       >
         {translatedDescription}
       </div>

package/UI/Components/Modal/Modal.tsx

@@ -10,9 +10,11 @@ import useTranslateValue from "../../Utils/Translation";
 import React, {
   FunctionComponent,
   ReactElement,
+  useCallback,
   useEffect,
   useId,
   useRef,
+  useState,
 } from "react";
 
 export enum ModalWidth {
@@ -21,6 +23,52 @@ export enum ModalWidth {
   Large,
 }
 
+/*
+ * The page behind a modal must not scroll, and nested modals share a single
+ * lock: a counter, rather than a boolean, is what stops the inner modal from
+ * handing scrolling back while its parent is still open.
+ */
+let openModalCount: number = 0;
+let bodyOverflowBeforeLock: string = "";
+let bodyPaddingRightBeforeLock: string = "";
+
+type PageScrollLockFunction = () => void;
+
+const lockPageScroll: PageScrollLockFunction = (): void => {
+  openModalCount++;
+
+  if (openModalCount > 1 || typeof document === "undefined") {
+    return;
+  }
+
+  bodyOverflowBeforeLock = document.body.style.overflow;
+  bodyPaddingRightBeforeLock = document.body.style.paddingRight;
+
+  /*
+   * Hiding the scrollbar reclaims its width, so the page underneath would
+   * jump sideways by exactly that much. Pad it back to hold everything still.
+   */
+  const scrollbarWidth: number =
+    window.innerWidth - document.documentElement.clientWidth;
+
+  if (scrollbarWidth > 0) {
+    document.body.style.paddingRight = `${scrollbarWidth}px`;
+  }
+
+  document.body.style.overflow = "hidden";
+};
+
+const unlockPageScroll: PageScrollLockFunction = (): void => {
+  openModalCount = Math.max(0, openModalCount - 1);
+
+  if (openModalCount > 0 || typeof document === "undefined") {
+    return;
+  }
+
+  document.body.style.overflow = bodyOverflowBeforeLock;
+  document.body.style.paddingRight = bodyPaddingRightBeforeLock;
+};
+
 export interface ComponentProps {
   title: string;
   description?: string | undefined;
@@ -39,6 +87,7 @@ export interface ComponentProps {
   rightElement?: ReactElement | undefined;
   closeButtonText?: string | undefined;
   leftFooterElement?: ReactElement | undefined;
+  disableCloseOnBackdropClick?: boolean | undefined;
 }
 
 const Modal: FunctionComponent<ComponentProps> = (
@@ -58,6 +107,10 @@ const Modal: FunctionComponent<ComponentProps> = (
   const translatedCloseLabel: string = translateString("Close") || "Close";
   const modalRef: React.RefObject<HTMLDivElement> =
     useRef<HTMLDivElement>(null);
+  const contentRef: React.RefObject<HTMLDivElement> =
+    useRef<HTMLDivElement>(null);
+  const contentInnerRef: React.RefObject<HTMLDivElement> =
+    useRef<HTMLDivElement>(null);
   const previouslyFocusedElementRef: React.MutableRefObject<HTMLElement | null> =
     useRef<HTMLElement | null>(
       typeof document !== "undefined" &&
@@ -68,17 +121,126 @@ const Modal: FunctionComponent<ComponentProps> = (
   const onCloseRef: React.MutableRefObject<(() => void) | undefined> = useRef<
     (() => void) | undefined
   >(props.onClose);
+  const backdropPressStartedOutsideRef: React.MutableRefObject<boolean> =
+    useRef<boolean>(false);
   const titleId: string = useId();
   const descriptionId: string = useId();
 
+  /*
+   * The modal is mounted in its closed state and flipped open one frame later
+   * so the browser has something to transition from. Without that first paint
+   * the panel would simply appear.
+   */
+  const [hasEntered, setHasEntered] = useState<boolean>(false);
+
+  /*
+   * A body taller than the modal hides content above and below the fold. The
+   * header and footer grow a shadow in whichever direction that is true, which
+   * is the only cue that the body scrolls at all.
+   */
+  const [isContentHiddenAbove, setIsContentHiddenAbove] =
+    useState<boolean>(false);
+  const [isContentHiddenBelow, setIsContentHiddenBelow] =
+    useState<boolean>(false);
+
   useEffect(() => {
     onCloseRef.current = props.onClose;
   }, [props.onClose]);
 
+  useEffect(() => {
+    const open: () => void = (): void => {
+      setHasEntered(true);
+    };
+
+    const frame: number = requestAnimationFrame(open);
+
+    /*
+     * A hidden or throttled tab never runs an animation frame, and a modal that
+     * opened there would sit at zero opacity. The timer is the safety net: it
+     * skips the transition rather than the modal.
+     */
+    const fallbackTimer: ReturnType<typeof setTimeout> = setTimeout(open, 80);
+
+    return () => {
+      cancelAnimationFrame(frame);
+      clearTimeout(fallbackTimer);
+    };
+  }, []);
+
+  useEffect(() => {
+    lockPageScroll();
+
+    return () => {
+      unlockPageScroll();
+    };
+  }, []);
+
+  useEffect(() => {
+    const content: HTMLDivElement | null = contentRef.current;
+
+    if (!content) {
+      return undefined;
+    }
+
+    const measure: () => void = (): void => {
+      /*
+       * A pixel of tolerance: fractional layout heights otherwise leave the
+       * bottom shadow up forever on a body that is already fully scrolled.
+       */
+      setIsContentHiddenAbove(content.scrollTop > 1);
+      setIsContentHiddenBelow(
+        content.scrollHeight - content.scrollTop - content.clientHeight > 1,
+      );
+    };
+
+    measure();
+    content.addEventListener("scroll", measure, { passive: true });
+
+    /*
+     * ResizeObserver is missing in jsdom and in older browsers. Falling back to
+     * resize events keeps the shadows roughly right there; what it cannot catch
+     * is the body growing on its own, which only matters once the modal is up.
+     */
+    if (typeof ResizeObserver === "undefined") {
+      window.addEventListener("resize", measure);
+
+      return () => {
+        content.removeEventListener("scroll", measure);
+        window.removeEventListener("resize", measure);
+      };
+    }
+
+    const observer: ResizeObserver = new ResizeObserver(measure);
+    observer.observe(content);
+
+    if (contentInnerRef.current) {
+      observer.observe(contentInnerRef.current);
+    }
+
+    return () => {
+      content.removeEventListener("scroll", measure);
+      observer.disconnect();
+    };
+  }, []);
+
+  const isTopmostDialog: () => boolean = useCallback((): boolean => {
+    const modal: HTMLDivElement | null = modalRef.current;
+
+    if (!modal) {
+      return false;
+    }
+
+    const openDialogs: Array<Element> = Array.from(
+      document.querySelectorAll('[role="dialog"][aria-modal="true"]'),
+    );
+
+    return openDialogs[openDialogs.length - 1] === modal;
+  }, []);
+
   useEffect(() => {
     const modal: HTMLDivElement | null = modalRef.current;
     if (!modal) {
-      return;
+      return undefined;
     }
 
     const getFocusableElements: () => Array<HTMLElement> =
@@ -88,21 +250,25 @@ const Modal: FunctionComponent<ComponentProps> = (
             'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])',
           ),
         ).filter((element: HTMLElement) => {
+          /*
+           * Collapsed sections and closed dropdowns leave focusable elements in
+           * the DOM with no box at all, and tabbing onto one of those looks
+           * exactly like focus escaping the modal. checkVisibility does not
+           * exist in jsdom, where nothing has a box to begin with, so the
+           * fallback keeps every element in the cycle there.
+           */
+          const isRendered: boolean =
+            typeof element.checkVisibility !== "function" ||
+            element.checkVisibility();
+
           return (
             !element.hasAttribute("disabled") &&
-            element.getAttribute("aria-hidden") !== "true"
+            element.getAttribute("aria-hidden") !== "true" &&
+            isRendered
           );
         });
       };
 
-    const isTopmostDialog: () => boolean = (): boolean => {
-      const openDialogs: Array<Element> = Array.from(
-        document.querySelectorAll('[role="dialog"][aria-modal="true"]'),
-      );
-
-      return openDialogs[openDialogs.length - 1] === modal;
-    };
-
     const initialFocusElement: HTMLElement | undefined =
       getFocusableElements().find((element: HTMLElement) => {
         return element.getAttribute("data-testid") !== "close-button";
@@ -168,7 +334,51 @@ const Modal: FunctionComponent<ComponentProps> = (
         previouslyFocusedElementRef.current.focus();
       }
     };
-  }, []);
+  }, [isTopmostDialog]);
+
+  type BackdropPressHandler = (event: React.MouseEvent<HTMLDivElement>) => void;
+  type IsEventOutsideModalFunction = (
+    event: React.MouseEvent<HTMLDivElement>,
+  ) => boolean;
+
+  const isEventOutsideModal: IsEventOutsideModalFunction = (
+    event: React.MouseEvent<HTMLDivElement>,
+  ): boolean => {
+    const modal: HTMLDivElement | null = modalRef.current;
+
+    return modal !== null && !modal.contains(event.target as Node);
+  };
+
+  const onBackdropMouseDown: BackdropPressHandler = (
+    event: React.MouseEvent<HTMLDivElement>,
+  ): void => {
+    backdropPressStartedOutsideRef.current = isEventOutsideModal(event);
+  };
+
+  const onBackdropClick: BackdropPressHandler = (
+    event: React.MouseEvent<HTMLDivElement>,
+  ): void => {
+    /*
+     * Both ends of the click have to land on the backdrop. Selecting text in
+     * the body and releasing the mouse past the edge of the panel is a drag,
+     * not a dismissal, and it used to be the fastest way to lose a filled-in
+     * form.
+     */
+    const pressStartedOutside: boolean = backdropPressStartedOutsideRef.current;
+    backdropPressStartedOutsideRef.current = false;
+
+    if (
+      props.disableCloseOnBackdropClick ||
+      !props.onClose ||
+      !pressStartedOutside ||
+      !isEventOutsideModal(event) ||
+      !isTopmostDialog()
+    ) {
+      return;
+    }
+
+    props.onClose();
+  };
 
   let modalWidthClassName: string = "sm:max-w-lg md:max-w-lg";
 
@@ -178,19 +388,35 @@ const Modal: FunctionComponent<ComponentProps> = (
     modalWidthClassName = "sm:max-w-7xl md:max-w-7xl";
   }
 
+  /*
+   * Once the panel has settled it carries no transform at all. A lingering
+   * `scale-100` would make it the containing block for `position: fixed`, and
+   * a modal opened from inside this one would be laid out against the panel
+   * instead of the viewport.
+   */
+  const panelTransitionClassName: string = hasEntered
+    ? "opacity-100"
+    : "translate-y-6 opacity-0 sm:translate-y-0 sm:scale-95";
+
   return (
     <div className="relative z-50">
       <div
-        className="fixed inset-0 bg-gray-950/45 backdrop-blur-[2px]"
+        className={`fixed inset-0 bg-gray-950/45 backdrop-blur-[2px] transition-opacity duration-200 ease-out motion-reduce:transition-none ${
+          hasEntered ? "opacity-100" : "opacity-0"
+        }`}
         data-testid="modal-backdrop"
         aria-hidden="true"
       />
 
-      <div className="fixed inset-0 z-50 overflow-y-auto">
+      <div
+        className="fixed inset-0 z-50 overflow-y-auto"
+        onMouseDown={onBackdropMouseDown}
+        onClick={onBackdropClick}
+      >
         <div className="flex min-h-full items-end justify-center p-0 text-center sm:items-center sm:p-6">
           <div
             ref={modalRef}
-            className={`relative flex max-h-[calc(100vh-1rem)] w-full flex-col rounded-t-2xl border border-gray-200/80 bg-white text-left shadow-2xl ring-1 ring-black/5 sm:my-8 sm:max-h-[calc(100vh-3rem)] sm:rounded-xl ${modalWidthClassName}`}
+            className={`relative flex max-h-[calc(100dvh-1rem)] w-full flex-col rounded-t-2xl border border-gray-200/80 bg-white text-left shadow-2xl ring-1 ring-black/5 transition duration-200 ease-out focus:outline-none motion-reduce:transition-none sm:my-8 sm:max-h-[calc(100dvh-4rem)] sm:rounded-xl ${modalWidthClassName} ${panelTransitionClassName}`}
             data-testid="modal"
             aria-labelledby={titleId}
             aria-describedby={translatedDescription ? descriptionId : undefined}
@@ -198,12 +424,14 @@ const Modal: FunctionComponent<ComponentProps> = (
             aria-modal="true"
             tabIndex={-1}
           >
-            <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={`min-w-0 flex-1 ${
-                  props.onClose ? "pr-9 sm:pr-0" : ""
-                }`}
-              >
+            <div
+              className={`relative z-10 flex shrink-0 items-start gap-3 rounded-t-2xl border-b border-gray-100 bg-white px-5 py-4 transition-shadow duration-200 sm:gap-4 sm:rounded-t-xl sm:px-6 ${
+                isContentHiddenAbove
+                  ? "shadow-[0_6px_10px_-10px_var(--ou-modal-scroll-shadow,rgb(15_23_42_/_0.35))]"
+                  : ""
+              }`}
+            >
+              <div className="min-w-0 flex-1">
                 <h3
                   data-testid="modal-title"
                   className="text-base font-semibold leading-6 tracking-tight text-gray-900"
@@ -224,7 +452,7 @@ const Modal: FunctionComponent<ComponentProps> = (
               {props.rightElement && (
                 <div
                   data-testid="right-element"
-                  className={`flex-shrink-0 ${props.onClose ? "pr-9" : ""}`}
+                  className="flex shrink-0 items-center"
                 >
                   {props.rightElement}
                 </div>
@@ -236,7 +464,7 @@ const Modal: FunctionComponent<ComponentProps> = (
                   aria-label={translatedCloseLabel}
                   data-testid="close-button"
                   onClick={props.onClose}
-                  className="absolute right-4 top-4 inline-flex h-8 w-8 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
+                  className="-mr-1.5 -mt-0.5 inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2"
                 >
                   <Icon icon={IconProp.Close} className="h-4 w-4" />
                 </button>
@@ -244,22 +472,25 @@ const Modal: FunctionComponent<ComponentProps> = (
             </div>
 
             <div
+              ref={contentRef}
               className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-5 py-5 sm:px-6"
               data-testid="modal-content"
             >
-              <ModalBody error={props.error}>
-                {!props.isBodyLoading ? (
-                  props.children
-                ) : (
-                  <div className="modal-body flex justify-center py-16">
-                    <Loader
-                      loaderType={LoaderType.Bar}
-                      color={VeryLightGray}
-                      size={200}
-                    />
-                  </div>
-                )}
-              </ModalBody>
+              <div ref={contentInnerRef}>
+                <ModalBody error={props.error}>
+                  {!props.isBodyLoading ? (
+                    props.children
+                  ) : (
+                    <div className="modal-body flex justify-center py-16">
+                      <Loader
+                        loaderType={LoaderType.Bar}
+                        color={VeryLightGray}
+                        size={200}
+                      />
+                    </div>
+                  )}
+                </ModalBody>
+              </div>
             </div>
             <ModalFooter
               submitButtonType={
@@ -294,6 +525,7 @@ const Modal: FunctionComponent<ComponentProps> = (
                 props.isBodyLoading || props.disableSubmitButton
               }
               leftFooterElement={props.leftFooterElement}
+              hasContentHiddenBelow={isContentHiddenBelow}
             />
           </div>
         </div>

package/UI/Components/Modal/ModalFooter.tsx

@@ -13,6 +13,7 @@ export interface ComponentProps {
   disableSubmitButton?: undefined | boolean;
   closeButtonText?: undefined | string;
   leftFooterElement?: ReactElement | undefined;
+  hasContentHiddenBelow?: boolean | undefined;
 }
 
 const ModalFooter: FunctionComponent<ComponentProps> = (
@@ -24,7 +25,11 @@ const ModalFooter: FunctionComponent<ComponentProps> = (
 
   return (
     <div
-      className="flex shrink-0 flex-col gap-3 rounded-b-2xl border-t border-gray-100 bg-gray-50/70 px-5 py-3 sm:flex-row sm:items-center sm:justify-between sm:rounded-b-xl sm:px-6"
+      className={`relative z-10 flex shrink-0 flex-col gap-3 rounded-b-2xl border-t border-gray-100 bg-gray-50/70 px-5 pb-[max(0.75rem,env(safe-area-inset-bottom))] pt-3 transition-shadow duration-200 sm:flex-row sm:items-center sm:justify-between sm:rounded-b-xl sm:px-6 sm:pb-3 ${
+        props.hasContentHiddenBelow
+          ? "shadow-[0_-6px_10px_-10px_var(--ou-modal-scroll-shadow,rgb(15_23_42_/_0.35))]"
+          : ""
+      }`}
       data-testid="modal-footer"
     >
       {props.leftFooterElement ? (

package/UI/Components/ModelDetail/CardModelDetail.tsx

@@ -12,8 +12,6 @@ import Fields from "../Forms/Types/Fields";
 import { FormStep } from "../Forms/Types/FormStep";
 import { ModalWidth } from "../Modal/Modal";
 import ModelFormModal from "../ModelFormModal/ModelFormModal";
-import { ToastType } from "../Toast/Toast";
-import { ShowToastNotification } from "../Toast/ToastInit";
 import ModelDetail, { ComponentProps as ModeDetailProps } from "./ModelDetail";
 import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
 import IconProp from "../../../Types/Icon/IconProp";
@@ -167,16 +165,6 @@ const CardModelDetail: <TBaseModel extends BaseModel>(
           onSuccess={(item: TBaseModel) => {
             setShowModal(false);
             setRefresher(!refresher);
-            /*
-             * The modal just disappears otherwise, which reads as "nothing
-             * happened" - especially on cards that do not display every field
-             * the edit form exposes.
-             */
-            ShowToastNotification({
-              title: "Changes saved",
-              description: `${model.singularName || "Item"} updated successfully.`,
-              type: ToastType.SUCCESS,
-            });
             if (props.onSaveSuccess) {
               props.onSaveSuccess(item);
             }

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -3707,7 +3707,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
                 b.onClick?.();
               }
             }}
-            className={b.disabled ? "opacity-40 pointer-events-none" : ""}
+            isDisabled={b.disabled}
           />
         );
       },

package/UI/Components/MonitorTemplateVariables/TemplateVariablesCatalog.ts

@@ -463,11 +463,21 @@ export default class TemplateVariablesCatalog {
         return {
           title: "Domain",
           variables: [
-            { key: "isOnline", description: "True if WHOIS lookup succeeded." },
+            {
+              key: "isOnline",
+              description: "True if the registration lookup succeeded.",
+            },
             { key: "domainName", description: "Domain queried." },
+            {
+              key: "lookupMethod",
+              description: "Protocol that answered - RDAP or WHOIS.",
+            },
             { key: "registrar", description: "Registrar name." },
             { key: "createdDate", description: "Domain registration date." },
-            { key: "updatedDate", description: "Last WHOIS update." },
+            {
+              key: "updatedDate",
+              description: "Last change to the registration.",
+            },
             { key: "expiresDate", description: "Expiration date." },
             { key: "nameServers", description: "Array of nameservers." },
             { key: "domainStatus", description: "EPP status codes." },