@oneuptime/common 12.0.32 → 12.0.34

package/UI/Components/SideMenu/SideMenuItem.tsx

@@ -20,6 +20,16 @@ export interface ComponentProps {
   subItemIcon?: undefined | IconProp;
 }
 
+/*
+ * One navigation row.
+ *
+ * The icon is drawn bare rather than inside a filled chip. A chip per row
+ * turns a fifteen-entry menu into a column of grey squares that all read the
+ * same, and it costs ~28px of the 208px the menu had — which is why titles
+ * like "Scheduled Maintenance" and "Recommendations" were being truncated to
+ * "Scheduled Mainte..." next to a badge. The icon still carries the active and
+ * hover colour; it just does it without a box around it.
+ */
 const SideMenuItem: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ) => {
@@ -43,13 +53,13 @@ const SideMenuItem: FunctionComponent<ComponentProps> = (
         className={`
           ${props.className || ""}
           group relative flex items-center justify-between
-          px-2 py-1.5 rounded-lg
-          text-sm font-medium
-          transition-all duration-200 ease-out
+          pl-3 pr-2 py-1.5 rounded-md
+          text-sm
+          transition-colors duration-150 ease-out
           ${
             isActive
-              ? "bg-gradient-to-r from-indigo-50 to-indigo-50/50 text-indigo-700 shadow-sm"
-              : "text-gray-600 hover:bg-gray-50 hover:text-gray-900"
+              ? "bg-indigo-50 text-indigo-700 font-semibold"
+              : "font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900"
           }
         `}
         to={props.link.to}
@@ -57,43 +67,45 @@ const SideMenuItem: FunctionComponent<ComponentProps> = (
           window.scrollTo({ top: 0, behavior: "smooth" });
         }}
       >
-        {/* Active Indicator Bar */}
+        {/*
+         * The active rail. It sits inside the row's left padding rather than
+         * outside it, so the row's background and the rail share one edge —
+         * an accent bar floating in the gutter reads as a rendering artefact
+         * once the row behind it is tinted.
+         */}
         <div
           className={`
-            absolute left-0 top-1/2 -translate-y-1/2
+            absolute left-1 top-1/2 -translate-y-1/2
             w-0.5 rounded-full
-            transition-all duration-200 ease-out
-            ${isActive ? "h-5 bg-indigo-600" : "h-0 bg-transparent"}
+            transition-all duration-150 ease-out
+            ${isActive ? "h-4 bg-indigo-600" : "h-0 bg-transparent"}
           `}
         />
 
         {/* Content Container */}
-        <div className="flex items-center min-w-0 gap-2">
-          {/* Icon with background on active */}
+        <div className="flex items-center min-w-0 gap-2.5">
           {props.icon && (
-            <div
+            <Icon
+              icon={props.icon}
               className={`
-                flex items-center justify-center
-                w-6 h-6 rounded-md
-                transition-all duration-200
+                h-4 w-4 flex-shrink-0
+                transition-colors duration-150
                 ${
                   isActive
-                    ? "bg-indigo-100 text-indigo-600"
-                    : "bg-gray-100 text-gray-500 group-hover:bg-gray-200 group-hover:text-gray-700"
+                    ? "text-indigo-600"
+                    : "text-gray-400 group-hover:text-gray-600"
                 }
               `}
-            >
-              <Icon icon={props.icon} className="h-3.5 w-3.5" />
-            </div>
+            />
           )}
 
-          {/* Title */}
-          <span
-            className={`
-              truncate transition-colors duration-200
-              ${isActive ? "font-semibold" : ""}
-            `}
-          >
+          {/*
+           * `truncate` is load-bearing beyond the ellipsis: the side-menu test
+           * harness reads a row's title from `span.truncate`, and without it
+           * falls back to the anchor's full textContent — which would fold the
+           * badge digits into every title it reads.
+           */}
+          <span className="truncate transition-colors duration-150">
             {translatedTitle}
           </span>
         </div>
@@ -107,72 +119,52 @@ const SideMenuItem: FunctionComponent<ComponentProps> = (
               <Badge badgeCount={props.badge} badgeType={props.badgeType} />
             )}
             {props.showAlert && (
-              <div className="flex items-center justify-center w-5 h-5 rounded-full bg-gradient-to-br from-red-50 to-red-100 ring-1 ring-inset ring-red-200/60 shadow-sm">
-                <Icon icon={IconProp.Error} className="text-red-600 h-3 w-3" />
-              </div>
+              <Icon icon={IconProp.Error} className="text-red-500 h-4 w-4" />
             )}
             {props.showWarning && (
-              <div className="flex items-center justify-center w-5 h-5 rounded-full bg-gradient-to-br from-amber-50 to-amber-100 ring-1 ring-inset ring-amber-200/60 shadow-sm">
-                <Icon
-                  icon={IconProp.Alert}
-                  className="text-amber-600 h-3 w-3"
-                />
-              </div>
+              <Icon icon={IconProp.Alert} className="text-amber-500 h-4 w-4" />
             )}
           </div>
         )}
-
-        {/* Hover indicator */}
-        <div
-          className={`
-            absolute inset-0 rounded-lg
-            border-2 border-transparent
-            transition-all duration-200
-            ${!isActive ? "group-hover:border-gray-200" : ""}
-            pointer-events-none
-          `}
-        />
       </UILink>
 
       {/* Sub Item */}
       {props.subItemLink && (
-        <UILink
-          className={`
-            ${props.className || ""}
-            group relative flex items-center justify-between
-            ml-8 px-2 py-1.5 rounded-lg
-            text-sm font-medium
-            transition-all duration-200 ease-out
-            ${
-              isSubItemActive
-                ? "bg-indigo-50/70 text-indigo-700"
-                : "text-gray-500 hover:bg-gray-50 hover:text-gray-700"
-            }
-          `}
-          to={props.subItemLink.to}
-          onClick={() => {
-            window.scrollTo({ top: 0, behavior: "smooth" });
-          }}
-        >
-          {/* Connector Line */}
-          <div className="absolute -left-3 top-1/2 w-2 h-px bg-gray-200" />
-
-          {/* Sub Item Icon */}
-          <div className="flex items-center min-w-0 gap-2">
-            <Icon
-              icon={props.subItemIcon || IconProp.MinusSmall}
-              className={`
-                h-4 w-4 transition-colors duration-200
-                ${
-                  isSubItemActive
-                    ? "text-indigo-500"
-                    : "text-gray-400 group-hover:text-gray-600"
-                }
-              `}
-            />
-            <span className="truncate">{translatedSubItemTitle}</span>
-          </div>
-        </UILink>
+        <div className="ml-5 border-l border-gray-200 pl-2">
+          <UILink
+            className={`
+              ${props.className || ""}
+              group relative flex items-center justify-between
+              px-2 py-1.5 rounded-md
+              text-sm font-medium
+              transition-colors duration-150 ease-out
+              ${
+                isSubItemActive
+                  ? "bg-indigo-50 text-indigo-700"
+                  : "text-gray-500 hover:bg-gray-50 hover:text-gray-900"
+              }
+            `}
+            to={props.subItemLink.to}
+            onClick={() => {
+              window.scrollTo({ top: 0, behavior: "smooth" });
+            }}
+          >
+            <div className="flex items-center min-w-0 gap-2.5">
+              <Icon
+                icon={props.subItemIcon || IconProp.MinusSmall}
+                className={`
+                  h-4 w-4 flex-shrink-0 transition-colors duration-150
+                  ${
+                    isSubItemActive
+                      ? "text-indigo-600"
+                      : "text-gray-400 group-hover:text-gray-600"
+                  }
+                `}
+              />
+              <span className="truncate">{translatedSubItemTitle}</span>
+            </div>
+          </UILink>
+        </div>
       )}
     </>
   );

package/UI/Components/SideMenu/SideMenuSection.tsx

@@ -17,6 +17,15 @@ export interface ComponentProps {
   isActive?: boolean;
 }
 
+/*
+ * A titled group of menu rows.
+ *
+ * The collapsed body keeps its children mounted and animates a max-height,
+ * rather than unmounting them: several menus badge their rows from a fetch on
+ * mount, and unmounting a collapsed section would restart those fetches every
+ * time it was reopened. The `max-h-0 / opacity-0` pair is also the contract
+ * the side-menu tests read collapse state from.
+ */
 const SideMenuSection: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ) => {
@@ -40,34 +49,57 @@ const SideMenuSection: FunctionComponent<ComponentProps> = (
     }
   };
 
+  /*
+   * The heading itself. Identical in both branches — only the element around
+   * it changes.
+   *
+   * An <h6> because the side-menu test harness locates a section by its
+   * heading; the visual weight comes from the classes, not the level.
+   */
+  const heading: ReactElement = (
+    <div className="flex items-center gap-2 min-w-0">
+      {props.icon && (
+        <Icon icon={props.icon} className="h-3.5 w-3.5 text-gray-400" />
+      )}
+      <h6 className="truncate text-xs font-semibold uppercase tracking-wider text-gray-400">
+        {translatedTitle}
+      </h6>
+    </div>
+  );
+
+  const headerClassName: string =
+    "w-full flex items-center justify-between px-3 pt-2 pb-1 rounded-md";
+
   return (
-    <div className="mb-2">
-      {/* Section Header */}
-      <button
-        type="button"
-        onClick={handleToggle}
-        className={`w-full flex items-center justify-between px-2 py-1.5 rounded-lg transition-colors duration-150 ${
-          isCollapsible ? "hover:bg-gray-50 cursor-pointer" : "cursor-default"
-        }`}
-        aria-expanded={!isCollapsed}
-      >
-        <div className="flex items-center gap-2">
-          {props.icon && (
-            <Icon icon={props.icon} className="h-4 w-4 text-gray-400" />
-          )}
-          <h6 className="text-xs font-semibold uppercase tracking-wider text-gray-500">
-            {translatedTitle}
-          </h6>
-        </div>
-        {isCollapsible && (
+    <div className="mb-2 first:mt-0 mt-1">
+      {/*
+       * Section Header.
+       *
+       * A section that cannot collapse renders no control at all, rather than
+       * a disabled-in-spirit <button aria-expanded="true"> whose handler
+       * returns immediately. The chevron and the pointer cursor were already
+       * suppressed in that case, so only keyboard and screen-reader users
+       * were being offered the phantom: a tab stop announcing an expand
+       * control that does nothing when activated.
+       */}
+      {isCollapsible ? (
+        <button
+          type="button"
+          onClick={handleToggle}
+          className={`${headerClassName} cursor-pointer transition-colors duration-150 hover:bg-gray-50`}
+          aria-expanded={!isCollapsed}
+        >
+          {heading}
           <Icon
             icon={IconProp.ChevronDown}
-            className={`h-4 w-4 text-gray-400 transition-transform duration-200 ${
+            className={`h-3.5 w-3.5 flex-shrink-0 text-gray-300 transition-transform duration-200 ${
               isCollapsed ? "-rotate-90" : "rotate-0"
             }`}
           />
-        )}
-      </button>
+        </button>
+      ) : (
+        <div className={`${headerClassName} cursor-default`}>{heading}</div>
+      )}
 
       {/* Section Content with Animation */}
       <div
@@ -75,7 +107,7 @@ const SideMenuSection: FunctionComponent<ComponentProps> = (
           isCollapsed ? "max-h-0 opacity-0" : "max-h-[2000px] opacity-100"
         }`}
       >
-        <div className="mt-0.5 space-y-0">{props.children}</div>
+        <div className="mt-0.5 space-y-0.5">{props.children}</div>
       </div>
     </div>
   );

package/UI/Components/SideOver/SideOver.tsx

@@ -1,13 +1,12 @@
 import Button, { ButtonStyleType } from "../Button/Button";
 import Icon from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
-import { lockPageScroll, unlockPageScroll } from "../../Utils/PageScrollLock";
+import { usePageScrollLock } from "../../Utils/PageScrollLock";
 import React, {
   FunctionComponent,
   ReactElement,
   useEffect,
   useId,
-  useLayoutEffect,
   useState,
 } from "react";
 import { createPortal } from "react-dom";
@@ -26,6 +25,23 @@ export interface ComponentProps {
   children: ReactElement | Array<ReactElement>;
   submitButtonDisabled?: boolean | undefined;
   submitButtonText?: string | undefined;
+  /*
+   * Spinner on the submit button, and a disable that comes with it — the same
+   * affordance Modal has always forwarded to its footer. Without it a panel
+   * whose submit kicks off a long job has to hand-roll a "Creating..." label
+   * and remember to disable itself, which is what every such panel here did.
+   */
+  submitButtonIsLoading?: boolean | undefined;
+  /*
+   * Disables the footer's Close button. Only worth setting while the panel is
+   * running something it cannot abandon: the alternative every caller reached
+   * for was to no-op inside `onClose`, which leaves a live-looking button that
+   * does nothing when pressed.
+   *
+   * Note this does NOT disable the header's × — that one stays available so a
+   * panel can never trap the user.
+   */
+  closeButtonDisabled?: boolean | undefined;
   leftFooterElement?: ReactElement | undefined;
   size?: SideOverSize | undefined;
   /*
@@ -127,24 +143,7 @@ const SideOver: FunctionComponent<ComponentProps> = (
     };
   }, []);
 
-  /*
-   * 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]);
+  usePageScrollLock(!props.disablePageScrollLock);
 
   const sideOver: ReactElement = (
     /*
@@ -246,6 +245,7 @@ const SideOver: FunctionComponent<ComponentProps> = (
               <div className="flex justify-end space-x-3">
                 <Button
                   title="Close"
+                  disabled={props.closeButtonDisabled}
                   onClick={() => {
                     props.onClose();
                   }}
@@ -256,6 +256,7 @@ const SideOver: FunctionComponent<ComponentProps> = (
                   <Button
                     title={props.submitButtonText || "Save"}
                     disabled={props.submitButtonDisabled}
+                    isLoading={props.submitButtonIsLoading}
                     onClick={() => {
                       props.onSubmit!();
                     }}

package/UI/Components/StatusPage/ResourceGroupSection.tsx

@@ -6,6 +6,7 @@ import React, {
   FunctionComponent,
   ReactElement,
   useEffect,
+  useRef,
   useState,
 } from "react";
 
@@ -40,6 +41,19 @@ export interface ComponentProps {
   /* Hex or css colour for the rollup, from the rolled up status. */
   rollupColor?: string | undefined;
   isInitiallyExpanded?: boolean | undefined;
+  /*
+   * Opens the section when it turns true, and puts back whatever the visitor
+   * had when it turns false again. The overview sets it while a search is
+   * running: a filtered page whose matches sit inside collapsed groups shows
+   * nothing, which reads as "no results" rather than as "found, but folded
+   * away".
+   *
+   * Deliberately a nudge rather than a lock. Pinning the section open would
+   * leave the header rendering as a working toggle that does nothing, and a
+   * visitor who wants a matched group out of the way while they read another
+   * one should be able to close it.
+   */
+  autoExpand?: boolean | undefined;
   /* The group's own resources. */
   resourcesElement?: ReactElement | undefined;
   /* Nested sections, normally one per sub group. */
@@ -77,6 +91,32 @@ const ResourceGroupSection: FunctionComponent<ComponentProps> = (
     setIsOpen(initiallyExpanded);
   }, [initiallyExpanded]);
 
+  /*
+   * Remembering the visitor's own choice across an autoExpand episode. Without
+   * this, clearing a search would leave every group on the page open - the
+   * search would have quietly rewritten the page's shape.
+   */
+  const wasAutoExpanded: React.MutableRefObject<boolean> =
+    useRef<boolean>(false);
+  const openStateBeforeAutoExpand: React.MutableRefObject<boolean | null> =
+    useRef<boolean | null>(null);
+
+  const autoExpand: boolean = Boolean(props.autoExpand);
+
+  useEffect(() => {
+    if (autoExpand && !wasAutoExpanded.current) {
+      openStateBeforeAutoExpand.current = isOpen;
+      setIsOpen(true);
+    } else if (!autoExpand && wasAutoExpanded.current) {
+      if (openStateBeforeAutoExpand.current !== null) {
+        setIsOpen(openStateBeforeAutoExpand.current);
+        openStateBeforeAutoExpand.current = null;
+      }
+    }
+
+    wasAutoExpanded.current = autoExpand;
+  }, [autoExpand]);
+
   const generatedId: string = React.useId();
   const bodyId: string = `status-page-group-body-${generatedId}`;
   const descriptionId: string = `status-page-group-description-${generatedId}`;

package/UI/Components/Table/CellClassName.ts

@@ -0,0 +1,81 @@
+import Column from "./Types/Column";
+import GenericObject from "../../../Types/GenericObject";
+
+/*
+ * Width cap for a cell that opts into wrapping without naming its own.
+ *
+ * 28rem is wide enough for a two-line status sentence and narrow enough that
+ * one long message cannot starve the columns beside it.
+ */
+export const DEFAULT_WRAP_MAX_WIDTH_CLASS_NAME: string = "max-w-md";
+
+export interface TableCellClassNameOptions<T extends GenericObject> {
+  column: Column<T>;
+  /*
+   * Compared against the RENDERED column count, not the declared one: with
+   * any column filtered out (hideOnMobile, permissions, the viewer's own
+   * layout) the two differ, and the extra right padding would land on the
+   * wrong cell - or on none.
+   */
+  isLastRenderedColumn: boolean;
+}
+
+/**
+ * The classes for one desktop body `<td>`.
+ *
+ * `whitespace-nowrap` is the default and is load-bearing for every date,
+ * count, badge and actions cell in the product - it is what keeps
+ * "12 Mar 2026, 4:05 pm" from folding onto two lines, in roughly two hundred
+ * column declarations that have no layout coverage of their own. Columns that
+ * hold prose opt out with `wrapContent`; see Types/Column.ts for why a
+ * max-width alone does not work and in fact makes the overlap worse
+ * (OneUptime issue #3585).
+ *
+ * For a column that declares no wrapping this returns the exact string the
+ * two cell renderers hard-coded before it existed, character for character.
+ */
+export function getTableCellClassName<T extends GenericObject>(
+  options: TableCellClassNameOptions<T>,
+): string {
+  const whitespaceClassName: string = options.column.wrapContent
+    ? "whitespace-normal break-words"
+    : "whitespace-nowrap";
+
+  const paddingRightClassName: string = options.isLastRenderedColumn
+    ? "pr-6"
+    : "pr-3";
+
+  return `${whitespaceClassName} py-4 pl-4 ${paddingRightClassName} text-sm font-medium text-gray-500 sm:pl-6 align-top`;
+}
+
+/**
+ * The classes for the `<div>` that wraps a cell's content.
+ *
+ * Empty for a column that asks for nothing, which is the overwhelming
+ * majority - deliberately, so neither the DOM nor a single class shifts for a
+ * column that declares neither option.
+ *
+ * A wrapping column always gets its width cap HERE, on the `<td>`'s direct
+ * child, never on the `<td>` itself: CSS leaves the effect of `max-width` on
+ * a table-cell box undefined and browsers ignore it, while a max-width on a
+ * block child DOES cap the column's max-content contribution under
+ * `table-layout: auto` - which is what Table.tsx renders, its `<table>`
+ * carrying no table-layout utility.
+ */
+export function getTableCellContentClassName<T extends GenericObject>(
+  column: Column<T>,
+): string {
+  const classNames: Array<string> = [];
+
+  if (column.wrapContent) {
+    classNames.push(
+      column.wrapMaxWidthClassName || DEFAULT_WRAP_MAX_WIDTH_CLASS_NAME,
+    );
+  }
+
+  if (column.contentClassName) {
+    classNames.push(column.contentClassName);
+  }
+
+  return classNames.join(" ");
+}

package/UI/Components/Table/TableRow.tsx

@@ -6,6 +6,10 @@ import Icon, { ThickProp } from "../Icon/Icon";
 import ConfirmModal from "../Modal/ConfirmModal";
 import FieldType from "../Types/FieldType";
 import Column from "./Types/Column";
+import {
+  getTableCellClassName,
+  getTableCellContentClassName,
+} from "./CellClassName";
 import Columns from "./Types/Columns";
 import Color from "../../../Types/Color";
 import OneUptimeDate from "../../../Types/Date";
@@ -395,17 +399,15 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
           )}
           {props.columns &&
             renderedColumns.map((column: Column<T>, i: number) => {
-              let className: string =
-                "whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-500 sm:pl-6 align-top";
               /*
-               * Compared against the rendered count, not the declared one:
-               * with any column filtered out the two differ, and the extra
-               * right padding would land on the wrong cell - or on none.
+               * Shared with the loading skeleton, so the two can no longer
+               * drift, and the one place that decides whether this cell's
+               * text may wrap.
                */
-              if (i === renderedColumns.length - 1) {
-                className =
-                  "whitespace-nowrap py-4 pl-4 pr-6 text-sm font-medium text-gray-500 sm:pl-6 align-top";
-              }
+              const className: string = getTableCellClassName<T>({
+                column: column,
+                isLastRenderedColumn: i === renderedColumns.length - 1,
+              });
 
               let columnContent: React.ReactNode = null;
 
@@ -479,12 +481,16 @@ const TableRow: TableRowFunction = <T extends GenericObject>(
                 columnContent = column.getElement(props.item);
               }
 
-              const contentWrapperClassName: string = column.contentClassName
-                ? column.contentClassName
-                : "";
+              /*
+               * The column's own classes, plus the width cap a wrapping
+               * column gets - which has to sit on this div rather than on the
+               * <td>, because max-width is ignored on a table-cell box.
+               */
+              const contentWrapperClassName: string =
+                getTableCellContentClassName<T>(column);
 
-              const actionsContainerClassName: string = column.contentClassName
-                ? `flex justify-end ${column.contentClassName}`
+              const actionsContainerClassName: string = contentWrapperClassName
+                ? `flex justify-end ${contentWrapperClassName}`
                 : "flex justify-end";
 
               return (

package/UI/Components/Table/TableSkeletonRows.tsx

@@ -1,5 +1,6 @@
 import Skeleton from "../Skeleton/Skeleton";
 import Column from "./Types/Column";
+import { getTableCellClassName } from "./CellClassName";
 import Columns from "./Types/Columns";
 import GenericObject from "../../../Types/GenericObject";
 import React, { ReactElement } from "react";
@@ -107,17 +108,16 @@ const TableSkeletonRows: TableSkeletonRowsFunction = <T extends GenericObject>(
                 </div>
               </td>
             )}
-            {visibleColumns.map((_column: Column<T>, columnIndex: number) => {
+            {visibleColumns.map((column: Column<T>, columnIndex: number) => {
               /*
-               * Cell classes copied from TableRow's real cells so the
-               * skeleton's rhythm and padding match the rows that replace it.
+               * The same classes TableRow gives its real cells, from the same
+               * helper, so the skeleton's rhythm and padding match the rows
+               * that replace it - and cannot drift from them again.
                */
-              let className: string =
-                "whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-500 sm:pl-6 align-top";
-              if (columnIndex === visibleColumns.length - 1) {
-                className =
-                  "whitespace-nowrap py-4 pl-4 pr-6 text-sm font-medium text-gray-500 sm:pl-6 align-top";
-              }
+              const className: string = getTableCellClassName<T>({
+                column: column,
+                isLastRenderedColumn: columnIndex === visibleColumns.length - 1,
+              });
 
               return (
                 <td key={columnIndex} className={className}>