@oneuptime/common 12.0.6 → 12.0.7

package/UI/Components/Modal/Modal.tsx

@@ -7,6 +7,7 @@ import ModalFooter from "./ModalFooter";
 import { VeryLightGray } from "../../../Types/BrandColors";
 import IconProp from "../../../Types/Icon/IconProp";
 import useTranslateValue from "../../Utils/Translation";
+import { lockPageScroll, unlockPageScroll } from "../../Utils/PageScrollLock";
 import React, {
   FunctionComponent,
   ReactElement,
@@ -23,52 +24,6 @@ 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;
@@ -346,7 +301,32 @@ const Modal: FunctionComponent<ComponentProps> = (
   ): boolean => {
     const modal: HTMLDivElement | null = modalRef.current;
 
-    return modal !== null && !modal.contains(event.target as Node);
+    if (modal === null) {
+      return false;
+    }
+
+    const target: Node = event.target as Node;
+
+    /*
+     * Dropdown menus inside the body (AutocompleteTextInput, OperatorSelector,
+     * ColorPicker, IconPicker, react-select) portal themselves to document.body
+     * so a scroll container cannot clip them. React dispatches events through
+     * the *React* tree rather than the DOM tree, so picking one of those
+     * options still bubbles into this handler even though the pointer never
+     * touched the backdrop — and because the option is not a DOM descendant of
+     * the panel, the containment check below read it as a click outside and
+     * dismissed the dialog, discarding whatever the user had filled in.
+     *
+     * A press only counts as a backdrop press when it physically landed inside
+     * the backdrop element this handler is attached to. That is a DOM question,
+     * and `contains` is true of the element itself, so a press directly on this
+     * layer or on the flex box it centres the panel in still dismisses.
+     */
+    if (!event.currentTarget.contains(target)) {
+      return false;
+    }
+
+    return !modal.contains(target);
   };
 
   const onBackdropMouseDown: BackdropPressHandler = (

package/UI/Components/ModelDelete/ModelDelete.tsx

@@ -14,6 +14,17 @@ export interface ComponentProps<TBaseModel extends BaseModel> {
   modelId: ObjectID;
   modelAPI?: typeof ModelAPI | undefined;
   onDeleteSuccess: () => void;
+  /*
+   * Extra content for the confirmation modal - a field to fill in before
+   * confirming, for example. State for it belongs to the caller.
+   */
+  confirmationContent?: ReactElement | undefined;
+  /*
+   * Replaces the delete request itself, for models whose delete needs more
+   * than an id (see confirmationContent). Throwing surfaces the error in the
+   * same dialog the default request uses.
+   */
+  onDelete?: (() => Promise<void>) | undefined;
 }
 
 const ModelDelete: <TBaseModel extends BaseModel>(
@@ -30,12 +41,16 @@ const ModelDelete: <TBaseModel extends BaseModel>(
   const deleteItem: PromiseVoidFunction = async (): Promise<void> => {
     setIsLoading(true);
     try {
-      const modelAPI: typeof ModelAPI = props.modelAPI || ModelAPI;
+      if (props.onDelete) {
+        await props.onDelete();
+      } else {
+        const modelAPI: typeof ModelAPI = props.modelAPI || ModelAPI;
 
-      await modelAPI.deleteItem<TBaseModel>({
-        modelType: props.modelType,
-        id: props.modelId,
-      });
+        await modelAPI.deleteItem<TBaseModel>({
+          modelType: props.modelType,
+          id: props.modelId,
+        });
+      }
       props.onDeleteSuccess?.();
     } catch (err) {
       setError(API.getFriendlyMessage(err));
@@ -76,7 +91,9 @@ const ModelDelete: <TBaseModel extends BaseModel>(
           }}
           submitButtonText={`Delete ${model.singularName}`}
           submitButtonType={ButtonStyleType.DANGER}
-        />
+        >
+          {props.confirmationContent}
+        </ConfirmModal>
       ) : (
         <></>
       )}

package/UI/Components/SideOver/SideOver.tsx

@@ -1,7 +1,16 @@
 import Button, { ButtonStyleType } from "../Button/Button";
 import Icon from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
-import React, { FunctionComponent, ReactElement } from "react";
+import { lockPageScroll, unlockPageScroll } from "../../Utils/PageScrollLock";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
 
 export enum SideOverSize {
   Small = "Small",
@@ -19,8 +28,42 @@ export interface ComponentProps {
   submitButtonText?: string | undefined;
   leftFooterElement?: ReactElement | undefined;
   size?: SideOverSize | undefined;
+  /*
+   * Opt out of hiding the page's scrollbar while the panel is open. Only worth
+   * setting for a panel that is a permanent part of its page rather than a
+   * transient drawer — every current caller wants the lock.
+   */
+  disablePageScrollLock?: boolean | undefined;
 }
 
+type PortalTargetFunction = () => HTMLElement | null;
+
+/*
+ * Where the panel is appended in the DOM, not where it appears on screen — it
+ * is `position: fixed` either way.
+ *
+ * Two reasons it cannot simply stay where the caller rendered it. First, any
+ * ancestor with a z-index traps the panel in that ancestor's stacking context,
+ * which is how a map's zoom toolbar (z-20) ended up painting on top of an open
+ * device panel. Second, and unfixable by z-index at all: only the fullscreen
+ * element's own subtree reaches the browser's top layer, so a panel appended to
+ * <body> while a chart or map is fullscreen is not painted anywhere. Following
+ * document.fullscreenElement keeps the panel visible in both modes.
+ */
+const getPortalTarget: PortalTargetFunction = (): HTMLElement | null => {
+  if (typeof document === "undefined") {
+    return null;
+  }
+
+  const fullscreenElement: Element | null = document.fullscreenElement;
+
+  if (fullscreenElement instanceof HTMLElement) {
+    return fullscreenElement;
+  }
+
+  return document.body;
+};
+
 const SideOver: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
@@ -34,85 +77,169 @@ const SideOver: FunctionComponent<ComponentProps> = (
     widthClass = "max-w-7xl";
   }
 
-  return (
+  const titleId: string = useId();
+  const descriptionId: string = useId();
+
+  const [portalTarget, setPortalTarget] = useState<HTMLElement | null>(
+    getPortalTarget,
+  );
+
+  useEffect(() => {
+    const syncPortalTarget: () => void = (): void => {
+      setPortalTarget(getPortalTarget());
+    };
+
+    /*
+     * Re-read once on mount as well: the first render happens before the
+     * browser has necessarily settled document.fullscreenElement.
+     */
+    syncPortalTarget();
+    document.addEventListener("fullscreenchange", syncPortalTarget);
+
+    return () => {
+      document.removeEventListener("fullscreenchange", syncPortalTarget);
+    };
+  }, []);
+
+  /*
+   * A layout effect, not an ordinary one. Hiding the page scrollbar widens the
+   * viewport that `right: 0` resolves against, so a panel that painted before
+   * the lock landed would visibly jump sideways by the scrollbar's width on
+   * every platform that draws a classic scrollbar. Locking before paint means
+   * the panel is only ever drawn in its final position.
+   */
+  useLayoutEffect(() => {
+    if (props.disablePageScrollLock) {
+      return undefined;
+    }
+
+    lockPageScroll();
+
+    return () => {
+      unlockPageScroll();
+    };
+  }, [props.disablePageScrollLock]);
+
+  const sideOver: ReactElement = (
+    /*
+     * z-30 clears every tier of page chrome (sticky headers and table headers
+     * at z-10/z-20, map and log-viewer toolbars at z-20) while staying under
+     * the app-wide overlays that must remain visible over a panel: Toast and
+     * the AI chat panel at z-40, Modal at z-50, portalled dropdown menus at
+     * z-60. Deliberately NOT z-40 — Toast and AIChatPanel are mounted ahead of
+     * the routed page in App.tsx, so an equal z-index would be broken in this
+     * panel's favour by document order and toasts would disappear behind it.
+     *
+     * role="dialog" without aria-modal, because the panel genuinely is not
+     * modal: everything outside it stays clickable by design (both topology
+     * maps let you click straight from one node's panel to the next). Claiming
+     * aria-modal also made this panel the last entry in Modal's dialog stack,
+     * which silently disabled Escape, backdrop-dismissal and initial focus on
+     * any Modal that was already open.
+     */
     <div
-      className="relative z-10"
-      aria-labelledby="slide-over-title"
+      className="relative z-30"
+      aria-labelledby={titleId}
+      aria-describedby={props.description ? descriptionId : undefined}
       role="dialog"
-      aria-modal="true"
+      data-testid="side-over"
     >
-      <div className="inset-0"></div>
-
-      <div className="inset-0 overflow-hidden">
-        <div className="inset-0 overflow-hidden">
-          <div className="pointer-events-none fixed inset-y-0 right-0 flex max-w-full">
-            <div className={`pointer-events-auto w-screen ${widthClass}`}>
-              <div className="flex h-full flex-col bg-white shadow-xl">
-                <div className="flex-shrink-0 flex flex-col bg-gray-50 px-4 py-6 sm:px-6">
-                  <div className="flex items-start justify-between space-x-3">
-                    <div className="space-y-1">
-                      <h2
-                        className="text-lg font-medium text-gray-900"
-                        id="slide-over-title"
-                      >
-                        {props.title}
-                      </h2>
-                      <p className="text-sm text-gray-500">
-                        {props.description}
-                      </p>
-                    </div>
-                    <div className="flex h-7 items-center">
-                      <button
-                        onClick={() => {
-                          props.onClose();
-                        }}
-                        type="button"
-                        className="text-gray-400 hover:text-gray-500"
-                      >
-                        <span className="sr-only">Close panel</span>
-
-                        <Icon className="h-6 w-6" icon={IconProp.Close} />
-                      </button>
-                    </div>
-                  </div>
-                </div>
-                <div className="h-full overflow-y-scroll">
-                  <div className="space-y-6 py-6 sm:space-y-0 sm:divide-y sm:divide-gray-200 sm:py-0 p-5">
-                    {props.children}
-                  </div>
+      <div
+        className="pointer-events-none fixed inset-0 flex justify-end"
+        data-testid="side-over-layer"
+      >
+        <div className={`pointer-events-auto w-full ${widthClass}`}>
+          <div className="flex h-full flex-col bg-white shadow-xl">
+            <div className="flex-shrink-0 flex flex-col bg-gray-50 px-4 py-6 sm:px-6">
+              <div className="flex items-start justify-between space-x-3">
+                <div className="space-y-1">
+                  <h2
+                    className="text-lg font-medium text-gray-900"
+                    id={titleId}
+                    data-testid="side-over-title"
+                  >
+                    {props.title}
+                  </h2>
+                  <p
+                    className="text-sm text-gray-500"
+                    id={descriptionId}
+                    data-testid="side-over-description"
+                  >
+                    {props.description}
+                  </p>
                 </div>
-                <div className="flex-shrink-0 border-t border-gray-200 px-4 py-5 sm:px-6 flex justify-between">
-                  <div className="flex justify-start space-x-3">
-                    {props.leftFooterElement}
-                  </div>
-                  <div className="flex justify-end space-x-3">
-                    <Button
-                      title="Close"
-                      onClick={() => {
-                        props.onClose();
-                      }}
-                      buttonStyle={ButtonStyleType.NORMAL}
-                    />
-
-                    {props.onSubmit && (
-                      <Button
-                        title={props.submitButtonText || "Save"}
-                        disabled={props.submitButtonDisabled}
-                        onClick={() => {
-                          props.onSubmit!();
-                        }}
-                        buttonStyle={ButtonStyleType.PRIMARY}
-                      />
-                    )}
-                  </div>
+                <div className="flex h-7 items-center">
+                  <button
+                    onClick={() => {
+                      props.onClose();
+                    }}
+                    type="button"
+                    title="Close panel"
+                    data-testid="close-button"
+                    className="text-gray-400 hover:text-gray-500"
+                  >
+                    <span className="sr-only">Close panel</span>
+
+                    <Icon className="h-6 w-6" icon={IconProp.Close} />
+                  </button>
                 </div>
               </div>
             </div>
+            {/*
+             * overflow-y-auto, not overflow-y-scroll: `scroll` paints a dead
+             * track down the panel's right edge even when the content fits,
+             * immediately beside the page's own scrollbar, which reads as the
+             * page scrollbar bleeding through the panel. overscroll-contain
+             * stops a wheel past the end of the panel from scrolling the page
+             * out from under it.
+             */}
+            <div
+              className="min-h-0 flex-1 overflow-y-auto overscroll-contain"
+              data-testid="side-over-content"
+            >
+              <div className="space-y-6 py-6 sm:space-y-0 sm:divide-y sm:divide-gray-200 sm:py-0 p-5">
+                {props.children}
+              </div>
+            </div>
+            <div
+              className="flex-shrink-0 border-t border-gray-200 px-4 py-5 sm:px-6 flex justify-between"
+              data-testid="side-over-footer"
+            >
+              <div className="flex justify-start space-x-3">
+                {props.leftFooterElement}
+              </div>
+              <div className="flex justify-end space-x-3">
+                <Button
+                  title="Close"
+                  onClick={() => {
+                    props.onClose();
+                  }}
+                  buttonStyle={ButtonStyleType.NORMAL}
+                />
+
+                {props.onSubmit && (
+                  <Button
+                    title={props.submitButtonText || "Save"}
+                    disabled={props.submitButtonDisabled}
+                    onClick={() => {
+                      props.onSubmit!();
+                    }}
+                    buttonStyle={ButtonStyleType.PRIMARY}
+                  />
+                )}
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </div>
   );
+
+  if (!portalTarget) {
+    return sideOver;
+  }
+
+  return createPortal(sideOver, portalTarget);
 };
 
 export default SideOver;

package/UI/Utils/PageScrollLock.ts

@@ -0,0 +1,66 @@
+/*
+ * The page behind an open dialog surface must not scroll, and nested surfaces
+ * share a single lock: a counter, rather than a boolean, is what stops an inner
+ * dialog from handing scrolling back while the surface that opened it is still
+ * up.
+ *
+ * This lives outside any one component on purpose. Modal and SideOver nest
+ * inside each other in shipped code — Workflow's "Run Workflow" panel is a
+ * SideOver that opens a ConfirmModal — and two private counters would race over
+ * document.body.style. Whichever surface unmounted first would restore the
+ * snapshot the other had already overwritten, leaving the page either scrolling
+ * under a dialog that is still open or locked forever with no dialog on screen.
+ */
+
+let openDialogCount: number = 0;
+let bodyOverflowBeforeLock: string = "";
+let bodyPaddingRightBeforeLock: string = "";
+
+export type PageScrollLockFunction = () => void;
+
+export const lockPageScroll: PageScrollLockFunction = (): void => {
+  openDialogCount++;
+
+  if (openDialogCount > 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";
+};
+
+export const unlockPageScroll: PageScrollLockFunction = (): void => {
+  openDialogCount = Math.max(0, openDialogCount - 1);
+
+  if (openDialogCount > 0 || typeof document === "undefined") {
+    return;
+  }
+
+  document.body.style.overflow = bodyOverflowBeforeLock;
+  document.body.style.paddingRight = bodyPaddingRightBeforeLock;
+};
+
+/*
+ * Test-only escape hatch. The counter is module state that survives between
+ * cases in the same jest file, so a suite that asserts on the FIRST lock needs
+ * a way back to a known zero.
+ */
+export const resetPageScrollLockForTesting: PageScrollLockFunction =
+  (): void => {
+    openDialogCount = 0;
+    bodyOverflowBeforeLock = "";
+    bodyPaddingRightBeforeLock = "";
+  };

package/Utils/Dashboard/HtmlWidgetDocument.ts

@@ -128,8 +128,10 @@ export default class HtmlWidgetDocument {
    *
    * Resolution is delegated to DashboardVariableInterpolation so this widget
    * agrees with every query-driven widget about what a variable currently
-   * means (selected value, else default, else nothing). Multi-select joins
-   * with "," because that is the form an author would paste into a filter.
+   * means: a single-select is its selected value, else its default, else
+   * nothing; a multi-select is its picks, and no picks is "All" — which
+   * lands here as "" rather than the default. Multi-select joins with ","
+   * because that is the form an author would paste into a filter.
    */
   public static resolveVariables(
     variables: Array<DashboardVariable> | undefined,

package/Utils/Dashboard/VariableInterpolation.ts

@@ -31,6 +31,23 @@ export interface ResolvedVariableValue {
  * key so the server's WHERE-builder produces `attributes[key] IN (...)`.
  */
 export default class DashboardVariableInterpolation {
+  /*
+   * The one place that decides what a variable currently *means*. Every
+   * widget and every selector defers to it, so the rules have to be
+   * stated rather than inferred:
+   *
+   * - A multi-select variable's `selectedValues` is its sole source of
+   *   truth. Empty or unset is the "All" state and produces no
+   *   predicate. `defaultValue` deliberately does NOT apply here: the
+   *   selector shows "All" whenever the list is empty and cannot show
+   *   anything else, so honouring a default would filter widgets behind
+   *   a control that reads "unfiltered". A default that only holds one
+   *   value also cannot express what a multi-select is for.
+   * - A single-select variable falls back to `defaultValue` only when
+   *   `selectedValue` is absent. An empty string is a real choice — the
+   *   "All" option — and must not be overwritten by the default, which
+   *   is why this uses `??` rather than `||`.
+   */
   public static resolveValue(
     variable: DashboardVariable,
   ): ResolvedVariableValue | undefined {
@@ -43,7 +60,8 @@ export default class DashboardVariableInterpolation {
       if (values.length > 0) {
         return { multi: values };
       }
-      // No multi-select picks. Fall through to default value handling.
+      // No picks: "All". Never falls back to the single-select default.
+      return undefined;
     }
 
     const v: string | undefined =

package/Utils/LegacySerializedArray.ts

@@ -0,0 +1,60 @@
+/*
+ * JSONFunctions.serializeValue had no Array.isArray branch. Arrays are
+ * typeof "object", so any array that reached it directly was walked by key and
+ * written out as { "0": ..., "1": ... }. Two shapes hit that path:
+ *
+ *   - an array nested directly inside another array, e.g. the
+ *     [facetKey, value] filter tuples of a telemetry saved view;
+ *   - a top-level array handed to LocalStorage/SessionStorage/Cookie, which
+ *     call serializeValue on the value itself rather than on a wrapper object.
+ *
+ * (An array under an object key was always safe, at any depth, because
+ * serialize() special-cases array-valued keys.)
+ *
+ * The serializer is fixed, but values written before the fix are still in
+ * databases and in browser storage. readLegacySerializedArray reads either
+ * shape, so those values load instead of being thrown away — or, worse,
+ * destructured and taking the page down with them.
+ */
+
+export function readLegacySerializedArray(
+  value: unknown,
+): Array<unknown> | null {
+  if (Array.isArray(value)) {
+    return value;
+  }
+
+  if (!value || typeof value !== "object") {
+    return null;
+  }
+
+  const record: Record<string, unknown> = value as Record<string, unknown>;
+  const keys: Array<string> = Object.keys(record);
+
+  /*
+   * An empty object is what an empty array serialized to, and in every place
+   * this is used an empty collection is the sensible reading.
+   */
+  if (keys.length === 0) {
+    return [];
+  }
+
+  /*
+   * Only a complete run of indices 0..n-1 could have come from an array. A
+   * genuine object that merely happens to have a "0" key keeps its own shape
+   * and is rejected here.
+   */
+  for (let index: number = 0; index < keys.length; index++) {
+    if (!Object.prototype.hasOwnProperty.call(record, String(index))) {
+      return null;
+    }
+  }
+
+  const restored: Array<unknown> = [];
+
+  for (let index: number = 0; index < keys.length; index++) {
+    restored.push(record[String(index)]);
+  }
+
+  return restored;
+}