@oneuptime/common 12.0.31 → 12.0.33

package/UI/Components/SideMenu/CountModelSideMenuItem.tsx

@@ -21,6 +21,7 @@ export const REFRESH_SIDEBAR_COUNT_EVENT: string = "REFRESH_SIDEBAR_COUNTS";
 
 export interface ComponentProps<TBaseModel extends BaseModel> {
   link: Link;
+  activeRoute?: Link["to"] | undefined;
   modelType?: { new (): TBaseModel } | undefined;
   badgeType?: BadgeType | undefined;
   countQuery?: Query<TBaseModel> | undefined;
@@ -136,6 +137,7 @@ const CountModelSideMenuItem: <TBaseModel extends BaseModel>(
   return (
     <SideMenuItem
       link={props.link}
+      activeRoute={props.activeRoute}
       badge={!isLoading && !error ? count : undefined}
       badgeType={props.badgeType}
       icon={props.icon}

package/UI/Components/SideMenu/SideMenu.tsx

@@ -20,6 +20,8 @@ import { RequestOptions } from "../../Utils/ModelAPI/ModelAPI";
 
 export interface SideMenuItemProps {
   link: Link;
+  // Use a different route for selection when the link target also changes query state.
+  activeRoute?: Link["to"] | undefined;
   showAlert?: boolean;
   showWarning?: boolean;
   badge?: number;
@@ -92,6 +94,94 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     }
   };
 
+  /*
+   * Walks the JSX children of a `<SideMenu>` written in the hand-rolled form
+   * and returns whichever entry points at the current page.
+   *
+   * It matches on the shape of the props rather than on component identity —
+   * an element with a `link` is a menu entry, an element with a `title` and
+   * children is a section — so it keeps working for the components built on
+   * top of SideMenuItem, and simply finds nothing for anything else (a
+   * fragment, a comment, a caller's own wrapper div) rather than throwing.
+   */
+  type ActiveMenuItem = {
+    sectionTitle?: string;
+    itemTitle?: string;
+    icon?: IconProp;
+  };
+
+  type FindActiveInChildrenFunction = (
+    children: ReactElement | Array<ReactElement> | undefined,
+    sectionTitle?: string | undefined,
+  ) => ActiveMenuItem;
+
+  const findActiveInChildren: FindActiveInChildrenFunction = (
+    children: ReactElement | Array<ReactElement> | undefined,
+    sectionTitle?: string | undefined,
+  ): ActiveMenuItem => {
+    if (!children) {
+      return {};
+    }
+
+    for (const child of React.Children.toArray(children)) {
+      if (!React.isValidElement(child)) {
+        continue;
+      }
+
+      const childProps: {
+        link?: Link | undefined;
+        activeRoute?: Link["to"] | undefined;
+        icon?: IconProp | undefined;
+        title?: string | undefined;
+        children?: ReactElement | Array<ReactElement> | undefined;
+      } = child.props as {
+        link?: Link | undefined;
+        activeRoute?: Link["to"] | undefined;
+        icon?: IconProp | undefined;
+        title?: string | undefined;
+        children?: ReactElement | Array<ReactElement> | undefined;
+      };
+
+      /*
+       * `activeRoute` first, matching the two loops above: an entry whose link
+       * carries query state points somewhere the current URL never equals, and
+       * declares the route that decides selection separately.
+       */
+      const matchRoute: Link["to"] | undefined =
+        childProps.activeRoute || childProps.link?.to;
+
+      if (
+        childProps.link &&
+        matchRoute &&
+        Navigation.isOnThisPage(matchRoute)
+      ) {
+        const result: ActiveMenuItem = { itemTitle: childProps.link.title };
+
+        if (sectionTitle) {
+          result.sectionTitle = sectionTitle;
+        }
+        if (childProps.icon) {
+          result.icon = childProps.icon;
+        }
+
+        return result;
+      }
+
+      if (childProps.children) {
+        const nested: ActiveMenuItem = findActiveInChildren(
+          childProps.children,
+          childProps.title || sectionTitle,
+        );
+
+        if (nested.itemTitle) {
+          return nested;
+        }
+      }
+    }
+
+    return {};
+  };
+
   // Function to find the active menu item and section - much simpler now!
   const findActiveMenuItem: () => {
     sectionTitle?: string;
@@ -106,7 +196,7 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     if (props.sections) {
       for (const section of props.sections) {
         for (const item of section.items) {
-          if (Navigation.isOnThisPage(item.link.to)) {
+          if (Navigation.isOnThisPage(item.activeRoute || item.link.to)) {
             const result: {
               sectionTitle: string;
               itemTitle: string;
@@ -127,7 +217,7 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
     // Check direct items
     if (props.items) {
       for (const item of props.items) {
-        if (Navigation.isOnThisPage(item.link.to)) {
+        if (Navigation.isOnThisPage(item.activeRoute || item.link.to)) {
           const result: {
             itemTitle: string;
             icon?: IconProp;
@@ -142,7 +232,23 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
       }
     }
 
-    return {};
+    /*
+     * ...and finally the hand-written JSX form.
+     *
+     * Roughly half the menus in the product are written as
+     * `<SideMenu><SideMenuSection>…<SideMenuItem/>…` rather than as a
+     * `sections` array — including every resource View menu. Neither loop
+     * above can see those, so on a phone all of them labelled their toggle
+     * with the fallback word "Navigation" instead of the page the user is
+     * actually on. The summary is the ONLY thing naming the current page
+     * while the menu is closed, which is most of the time on a phone.
+     *
+     * This reads the same two props off the elements the caller wrote, so it
+     * covers SideMenuItem, CountModelSideMenuItem and the per-feature items
+     * built on top of them (RecommendationsSideMenuItem) without knowing
+     * anything about their types.
+     */
+    return findActiveInChildren(props.children);
   };
 
   const activeItem: {
@@ -184,9 +290,13 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
             icon?: IconProp;
             defaultCollapsed?: boolean;
             collapsible?: boolean;
+            isActive: boolean;
           } = {
             key: `section-${sectionIndex}`,
             title: section.title,
+            isActive: section.items.some((item: SideMenuItemProps): boolean => {
+              return Navigation.isOnThisPage(item.activeRoute || item.link.to);
+            }),
           };
 
           if (section.icon) {
@@ -209,6 +319,7 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
                       <CountModelSideMenuItem
                         key={`section-${sectionIndex}-count-item-${itemIndex}`}
                         link={item.link}
+                        activeRoute={item.activeRoute}
                         badgeType={item.badgeType}
                         modelType={item.modelType as any}
                         countQuery={item.countQuery as any}
@@ -225,6 +336,7 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
                     <SideMenuItem
                       key={`section-${sectionIndex}-item-${itemIndex}`}
                       link={item.link}
+                      activeRoute={item.activeRoute}
                       showAlert={item.showAlert}
                       showWarning={item.showWarning}
                       badge={item.badge}
@@ -252,6 +364,7 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
             <CountModelSideMenuItem
               key={`count-item-${itemIndex}`}
               link={item.link}
+              activeRoute={item.activeRoute}
               badgeType={item.badgeType}
               modelType={item.modelType as any}
               countQuery={item.countQuery as any}
@@ -267,6 +380,7 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
             <SideMenuItem
               key={`item-${itemIndex}`}
               link={item.link}
+              activeRoute={item.activeRoute}
               showAlert={item.showAlert}
               showWarning={item.showWarning}
               badge={item.badge}
@@ -411,7 +525,15 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
   // Desktop view
   return (
     <aside
-      className={`hidden md:block w-52 lg:w-60 flex-shrink-0 mb-10 ${props.className || ""}`}
+      /*
+       * w-56 rather than w-52. Page.tsx lays the menu out beside a
+       * `flex-1 min-w-0` content column, so this class is the only thing
+       * setting the sidebar's width — and at 208px the longest shipped titles
+       * ("Scheduled Maintenance", "Recommendations" beside a badge) were
+       * ellipsised on every page that has them. 16px buys those back without
+       * taking a visible bite out of the content column.
+       */
+      className={`hidden md:block w-56 lg:w-64 flex-shrink-0 mb-10 ${props.className || ""}`}
       role="navigation"
       aria-label="Main navigation"
     >
@@ -426,11 +548,17 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
         className="sticky"
         style={{ top: "calc(var(--app-header-height, 0px) + 1.5rem)" }}
       >
+        {/*
+         * rounded-xl and a plain border-gray-200, matching Card and InfoCard.
+         * The menu sits directly beside those, and it was the only page-level
+         * surface in the product with a 1rem radius and a translucent border —
+         * which read as a slightly different shade of white next to them.
+         */}
         <div
           className={`
             flex flex-col
-            bg-white rounded-2xl
-            border border-gray-200/80
+            bg-white rounded-xl
+            border border-gray-200
             shadow-sm
             overflow-hidden
           `}
@@ -453,7 +581,7 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
 
           {/* Menu Content */}
           <nav className="p-2 min-h-0 overflow-y-auto">
-            <div className="space-y-0.5">{renderMenuContent()}</div>
+            <div className="space-y-1">{renderMenuContent()}</div>
           </nav>
 
           {/* Optional Footer */}

package/UI/Components/SideMenu/SideMenuItem.tsx

@@ -9,6 +9,7 @@ import React, { FunctionComponent } from "react";
 
 export interface ComponentProps {
   link: Link;
+  activeRoute?: Link["to"] | undefined;
   showAlert?: undefined | boolean;
   showWarning?: undefined | boolean;
   badge?: undefined | number;
@@ -19,11 +20,23 @@ 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,
 ) => {
   const { translateString } = useTranslateValue();
-  const isActive: boolean = Navigation.isOnThisPage(props.link.to);
+  const isActive: boolean = Navigation.isOnThisPage(
+    props.activeRoute || props.link.to,
+  );
   const isSubItemActive: boolean = props.subItemLink
     ? Navigation.isOnThisPage(props.subItemLink.to)
     : false;
@@ -40,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}
@@ -54,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>
@@ -104,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

@@ -1,7 +1,12 @@
 import Icon from "../Icon/Icon";
 import useTranslateValue from "../../Utils/Translation";
 import IconProp from "../../../Types/Icon/IconProp";
-import React, { FunctionComponent, ReactElement, useState } from "react";
+import React, {
+  FunctionComponent,
+  ReactElement,
+  useEffect,
+  useState,
+} from "react";
 
 export interface ComponentProps {
   title: string;
@@ -9,53 +14,92 @@ export interface ComponentProps {
   defaultCollapsed?: boolean;
   collapsible?: boolean;
   icon?: IconProp;
+  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,
 ) => {
   const { translateString } = useTranslateValue();
   const [isCollapsed, setIsCollapsed] = useState<boolean>(
-    props.defaultCollapsed || false,
+    Boolean(props.defaultCollapsed && !props.isActive),
   );
   const translatedTitle: string = translateString(props.title) || props.title;
 
   const isCollapsible: boolean = props.collapsible ?? true;
 
+  useEffect(() => {
+    if (props.isActive) {
+      setIsCollapsed(false);
+    }
+  }, [props.isActive]);
+
   const handleToggle: () => void = (): void => {
     if (isCollapsible) {
       setIsCollapsed(!isCollapsed);
     }
   };
 
+  /*
+   * 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
@@ -63,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>
   );