@oneuptime/common 12.0.32 → 12.0.33

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/Utils/PageScrollLock.ts

@@ -12,6 +12,8 @@
  * under a dialog that is still open or locked forever with no dialog on screen.
  */
 
+import { useLayoutEffect } from "react";
+
 let openDialogCount: number = 0;
 let bodyOverflowBeforeLock: string = "";
 let bodyPaddingRightBeforeLock: string = "";
@@ -42,15 +44,89 @@ export const lockPageScroll: PageScrollLockFunction = (): void => {
   document.body.style.overflow = "hidden";
 };
 
+/*
+ * Restoring means putting the page back exactly as it was found, and "as it
+ * was found" is usually no inline value at all rather than an empty one. Going
+ * through removeProperty for that case says so directly — and it is also the
+ * only spelling jsdom honours for a longhand like padding-right, so the
+ * restore is assertable in a test instead of being taken on trust.
+ */
+type RestoreBodyStyleFunction = (property: string, value: string) => void;
+
+const restoreBodyStyle: RestoreBodyStyleFunction = (
+  property: string,
+  value: string,
+): void => {
+  if (value === "") {
+    document.body.style.removeProperty(property);
+
+    return;
+  }
+
+  document.body.style.setProperty(property, value);
+};
+
 export const unlockPageScroll: PageScrollLockFunction = (): void => {
-  openDialogCount = Math.max(0, openDialogCount - 1);
+  /*
+   * Nothing is open, so there is nothing of ours on the page to put back. A
+   * stray unlock — one surface releasing twice, a cleanup that outlives the
+   * lock it was paired with — has to be inert rather than paint a snapshot
+   * taken for some earlier dialog over whatever the page is wearing now.
+   */
+  if (openDialogCount === 0) {
+    return;
+  }
+
+  openDialogCount--;
 
   if (openDialogCount > 0 || typeof document === "undefined") {
     return;
   }
 
-  document.body.style.overflow = bodyOverflowBeforeLock;
-  document.body.style.paddingRight = bodyPaddingRightBeforeLock;
+  restoreBodyStyle("overflow", bodyOverflowBeforeLock);
+  restoreBodyStyle("padding-right", bodyPaddingRightBeforeLock);
+};
+
+/*
+ * The declarative form, and the one new surfaces should reach for.
+ *
+ * Every caller of the pair above writes the same effect: acquire on the way
+ * in, release from the cleanup, keyed on whether the surface is up. Written by
+ * hand that is four lines with three ways to get it wrong — release omitted,
+ * the wrong dependency, or the call placed after an early `return` so it stops
+ * running once the surface closes. Issue #3553 is what the first two look like
+ * from the outside: the Ask AI panel declared aria-modal, dimmed the page
+ * behind it, and let that page scroll away under the wheel because nothing
+ * ever took the lock.
+ *
+ * Passing the open flag straight in keeps the invariant to one line, and keeps
+ * it correct for surfaces like AIChatPanel that stay mounted while closed
+ * rather than being unmounted by their parent.
+ *
+ * A layout effect, not an ordinary one, and that is load-bearing for every
+ * caller rather than a detail of one. Hiding the page scrollbar widens the
+ * viewport that a fixed overlay resolves against, so a surface that painted
+ * before the lock landed jumps sideways by the scrollbar's width on any
+ * platform drawing a classic scrollbar — the full width for a panel pinned to
+ * `right: 0`, half of it for a centred dialog. Locking before paint means the
+ * surface is only ever drawn in its final position.
+ */
+export type UsePageScrollLockFunction = (isLocked: boolean) => void;
+
+export const usePageScrollLock: UsePageScrollLockFunction = (
+  isLocked: boolean,
+): void => {
+  useLayoutEffect(() => {
+    if (!isLocked) {
+      return undefined;
+    }
+
+    lockPageScroll();
+
+    return () => {
+      unlockPageScroll();
+    };
+  }, [isLocked]);
 };
 
 /*

package/UI/Utils/PermissionGate.ts

@@ -51,6 +51,11 @@ export interface PermissionCheckableModel {
   getReadPermissions: () => Array<Permission>;
   getUpdatePermissions: () => Array<Permission>;
   getDeletePermissions: () => Array<Permission>;
+  /*
+   * Set by the @OperationalResource() decorator. Optional here because the
+   * analytics models that are not decorated never define it at all.
+   */
+  isOperationalResource?: boolean | undefined;
 }
 
 /*
@@ -228,6 +233,33 @@ export default class PermissionGate {
     model: PermissionCheckableModel,
     action: ModelAction,
     userPermissions: Array<Permission>,
+  ): boolean {
+    if (this.hasDeclaredPermission(model, action, userPermissions)) {
+      return true;
+    }
+
+    /*
+     * The server widens a model's declared permissions with the matching
+     * *AllOperationalResources wildcard for anything marked
+     * @OperationalResource (TablePermission.getEffectiveModelPermissions, and
+     * its analytics twin). Without the same step here, somebody granted
+     * "Edit All Operational Resources" - and nothing else - was told by every
+     * gate in the UI that they could not edit a monitor, an incident or a
+     * dashboard, while the API happily accepted the write. The gate must not
+     * be stricter than the endpoint it is standing in front of.
+     */
+    const wildcard: Permission | null = this.getOperationalWildcard(
+      model,
+      action,
+    );
+
+    return Boolean(wildcard && userPermissions.includes(wildcard));
+  }
+
+  private static hasDeclaredPermission(
+    model: PermissionCheckableModel,
+    action: ModelAction,
+    userPermissions: Array<Permission>,
   ): boolean {
     switch (action) {
       case ModelAction.Create:
@@ -243,6 +275,35 @@ export default class PermissionGate {
     }
   }
 
+  /*
+   * The wildcard that covers this operation on this model, or null when the
+   * model is not an operational resource. Kept out of getModelPermissions on
+   * purpose: that list is what the "you need one of these permissions"
+   * sentence is built from, and the server names only the model's own
+   * permissions there too.
+   */
+  private static getOperationalWildcard(
+    model: PermissionCheckableModel,
+    action: ModelAction,
+  ): Permission | null {
+    if (!model.isOperationalResource) {
+      return null;
+    }
+
+    switch (action) {
+      case ModelAction.Create:
+        return Permission.CreateAllOperationalResources;
+      case ModelAction.Read:
+        return Permission.ReadAllOperationalResources;
+      case ModelAction.Update:
+        return Permission.EditAllOperationalResources;
+      case ModelAction.Delete:
+        return Permission.DeleteAllOperationalResources;
+      default:
+        return null;
+    }
+  }
+
   /*
    * Applies a gate to a card button in one line. Several tables replace the
    * built in create modal with a button that routes to a dedicated create