@oneuptime/common 14.0.3 → 14.0.6

package/UI/Components/Feed/FeedOptionsButton.tsx

@@ -448,7 +448,7 @@ const FeedOptionsButton: FunctionComponent<ComponentProps> = (
           className={`h-4 w-4 ${isCustomized ? "text-indigo-500" : "text-gray-500"}`}
         />
         <span
-          className="sr-only xl:not-sr-only"
+          className="max-xl:sr-only xl:not-sr-only"
           data-testid="feed-options-label"
         >
           {translate(FEED_OPTIONS_TEXT.triggerLabel)}

package/UI/Components/Forms/BasicForm.tsx

@@ -673,7 +673,7 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
               {formSteps && currentFormStepId && (
                 <div
                   style={{ flex: "0 1 auto" }}
-                  className="mr-10 hidden lg:block"
+                  className="mr-10 max-lg:hidden lg:block"
                 >
                   {/* Form Steps */}
 

package/UI/Components/Header/Header.tsx

@@ -5,7 +5,7 @@ export interface ComponentProps {
   /*
    * The right-hand rail. Rendered at every viewport width — see the note on the
    * container below. An entry that only earns its space on a wide screen
-   * carries its own breakpoint classes (`hidden lg:flex`) at the call site.
+   * carries its own breakpoint classes (`max-lg:hidden lg:flex`) at the call site.
    */
   rightComponents?: undefined | Array<ReactElement> | ReactElement;
   centerComponents?: undefined | Array<ReactElement> | ReactElement;

package/UI/Components/Header/HeaderIconDropdownButton.tsx

@@ -128,7 +128,7 @@ const HeaderIconDropdownButton: FunctionComponent<ComponentProps> = (
               keys={props.shortcut!}
               size={KeyboardShortcutSize.ExtraSmall}
               variant={KeyboardShortcutVariant.Ghost}
-              className="ml-0.5 hidden sm:inline-flex"
+              className="ml-0.5 max-sm:hidden sm:inline-flex"
             />
           )}
         </button>

package/UI/Components/HeaderAlert/HeaderAlert.tsx

@@ -88,7 +88,7 @@ const HeaderAlert: (props: ComponentProps) => ReactElement = (
             </span>
             {props.suffix && (
               <span
-                className={`${textColor} text-sm font-medium opacity-80 hidden md:block`}
+                className={`${textColor} text-sm font-medium opacity-80 max-md:hidden md:block`}
               >
                 {props.suffix}
               </span>

package/UI/Components/Input/Input.tsx

@@ -30,6 +30,14 @@ export interface ComponentProps {
   ariaHasPopup?: "dialog" | "listbox" | "menu" | "grid" | "tree" | undefined;
   ariaExpanded?: boolean | undefined;
   ariaControls?: string | undefined;
+  /*
+   * A text box that drives a list of suggestions is a combobox; the option
+   * the arrow keys are on is named by ariaActiveDescendant, since focus
+   * itself never leaves the input.
+   */
+  role?: "combobox" | undefined;
+  ariaAutoComplete?: "list" | "both" | "inline" | "none" | undefined;
+  ariaActiveDescendant?: string | undefined;
   // For inputs with no visible label element to point ariaLabelledby at.
   ariaLabel?: string | undefined;
   /*
@@ -219,6 +227,9 @@ const Input: FunctionComponent<ComponentProps> = (
           aria-haspopup={props.ariaHasPopup}
           aria-expanded={props.ariaExpanded}
           aria-controls={props.ariaControls}
+          role={props.role}
+          aria-autocomplete={props.ariaAutoComplete}
+          aria-activedescendant={props.ariaActiveDescendant}
           aria-invalid={props.error || props.ariaInvalid ? "true" : undefined}
           aria-describedby={
             props.error ? "input-error-message" : props.ariaDescribedby

package/UI/Components/LogsViewer/components/FacetValueRow.tsx

@@ -100,7 +100,7 @@ const FacetValueRow: FunctionComponent<FacetValueRowProps> = (
 
       <button
         type="button"
-        className="hidden h-5 w-5 items-center justify-center rounded text-[10px] text-gray-400 transition-colors hover:bg-red-50 hover:text-red-500 group-hover:flex"
+        className="flex h-5 w-5 items-center justify-center rounded text-[10px] text-gray-400 transition-colors hover:bg-red-50 hover:text-red-500 group-[:not(:hover)]:hidden"
         onClick={(e: React.MouseEvent) => {
           e.stopPropagation();
           props.onExclude(props.value);

package/UI/Components/LogsViewer/components/LogsFacetSidebar.tsx

@@ -361,7 +361,7 @@ const LogsFacetSidebar: FunctionComponent<LogsFacetSidebarProps> = (
     <div
       id={props.id}
       className={`${
-        props.isCollapsedOnSmallScreens ? "hidden md:flex" : "flex"
+        props.isCollapsedOnSmallScreens ? "max-md:hidden md:flex" : "flex"
       } max-h-80 w-full flex-none flex-col overflow-y-auto rounded-lg border border-gray-200 bg-white md:h-full md:max-h-none md:w-56`}
     >
       <div className="border-b border-gray-100 px-3 py-2.5">

package/UI/Components/Modal/ModalFooter.tsx

@@ -37,7 +37,7 @@ const ModalFooter: FunctionComponent<ComponentProps> = (
           {props.leftFooterElement}
         </div>
       ) : (
-        <div className="hidden sm:block" />
+        <div className="max-sm:hidden sm:block" />
       )}
       <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:items-center">
         {props.onClose ? (

package/UI/Components/ModelDetail/CardModelDetail.tsx

@@ -97,7 +97,7 @@ const CardModelDetail: <TBaseModel extends BaseModel>(
         title: "View Documentation",
         icon: IconProp.Book,
         buttonStyle: ButtonStyleType.OUTLINE,
-        className: "hidden md:flex",
+        className: "max-md:hidden md:flex",
         onClick: () => {
           Navigation.navigate(props.documentationLink!, {
             openInNewTab: true,
@@ -112,7 +112,7 @@ const CardModelDetail: <TBaseModel extends BaseModel>(
         title: "Watch Demo",
         icon: IconProp.Play,
         buttonStyle: ButtonStyleType.OUTLINE,
-        className: "hidden md:flex",
+        className: "max-md:hidden md:flex",
         onClick: () => {
           Navigation.navigate(props.videoLink!, {
             openInNewTab: true,

package/UI/Components/ModelTable/BaseModelTable.tsx

@@ -2433,7 +2433,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         icon: IconProp.Book,
         buttonStyle: ButtonStyleType.HOVER_PRIMARY_OUTLINE,
         buttonSize: ButtonSize.Small,
-        className: "hidden md:flex",
+        className: "max-md:hidden md:flex",
         onClick: () => {
           Navigation.navigate(props.documentationLink!, {
             openInNewTab: true,
@@ -2463,7 +2463,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
         icon: IconProp.Play,
         buttonStyle: ButtonStyleType.HOVER_PRIMARY_OUTLINE,
         buttonSize: ButtonSize.Small,
-        className: "hidden md:flex",
+        className: "max-md:hidden md:flex",
         onClick: () => {
           Navigation.navigate(props.videoLink!, {
             openInNewTab: true,
@@ -4067,7 +4067,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
               </button>
             ) : (
               <kbd
-                className="hidden flex-none select-none items-center rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 font-mono text-[10px] font-medium text-gray-500 sm:inline-flex"
+                className="max-sm:hidden flex-none select-none items-center rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 font-mono text-[10px] font-medium text-gray-500 sm:inline-flex"
                 title="Press / to focus search"
               >
                 /
@@ -4416,7 +4416,7 @@ const BaseModelTable: <TBaseModel extends BaseModel | AnalyticsBaseModel>(
             <span className="flex-1 truncate text-left text-gray-400">
               Search…
             </span>
-            <kbd className="hidden flex-none select-none items-center rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 font-mono text-[10px] font-medium text-gray-500 sm:inline-flex">
+            <kbd className="max-sm:hidden flex-none select-none items-center rounded border border-gray-200 bg-gray-50 px-1.5 py-0.5 font-mono text-[10px] font-medium text-gray-500 sm:inline-flex">
               /
             </kbd>
           </button>

package/UI/Components/Navbar/NavBar.tsx

@@ -392,10 +392,17 @@ const Navbar: FunctionComponent<ComponentProps> = (
     );
   }
 
-  // Desktop view
+  /*
+   * Desktop view. `max-md:hidden md:flex`, never `hidden md:flex`: the bare
+   * `hidden` class is the one name a browser extension, a user stylesheet or
+   * an injected Bootstrap 3 / HTML5 Boilerplate sheet declares as
+   * `.hidden { display: none !important }`, and that rule beats `md:flex` at
+   * every width. A customer lost the whole navigation bar — and with it every
+   * product — to exactly that. The max-width form never carries the class.
+   */
   const className: string =
     props.className ||
-    "bg-white flex text-center items-center lg:py-2 hidden md:flex";
+    "bg-white flex text-center items-center lg:py-2 max-md:hidden md:flex";
 
   // Find active item in more menu items (needed for breadcrumb)
   const activeMoreItem: MoreMenuItem | undefined = props.moreMenuItems?.find(

package/UI/Components/Navbar/NavBarMenuModal.tsx

@@ -516,7 +516,7 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
                 <KeyboardShortcut
                   keys={[KeyboardKey.Mod, "K"]}
                   size={KeyboardShortcutSize.Small}
-                  className="hidden sm:inline-flex"
+                  className="max-sm:hidden sm:inline-flex"
                 />
               ) : null}
             </div>
@@ -661,7 +661,7 @@ const NavBarMenuModal: FunctionComponent<ComponentProps> = (
                 {props.keyboardHint && (
                   <div
                     aria-label={tx(props.keyboardHint)}
-                    className="hidden flex-shrink-0 items-center gap-2 text-xs text-gray-400 md:flex"
+                    className="max-md:hidden flex-shrink-0 items-center gap-2 text-xs text-gray-400 md:flex"
                   >
                     <KeyboardShortcut
                       keys={[KeyboardKey.ArrowUp, KeyboardKey.ArrowDown]}

package/UI/Components/Page/Page.tsx

@@ -113,7 +113,7 @@ const Page: FunctionComponent<ComponentProps> = (
                   </div>
                 )}
                 {props.labels && props.labels.length > 0 && (
-                  <div className="hidden sm:flex sm:flex-wrap sm:items-center sm:justify-end sm:gap-3">
+                  <div className="max-sm:hidden sm:flex sm:flex-wrap sm:items-center sm:justify-end sm:gap-3">
                     <span className="text-xs font-semibold uppercase tracking-wide text-gray-500 whitespace-nowrap">
                       {translateString("Labels") || "Labels"}
                     </span>

package/UI/Components/Pagination/Pagination.tsx

@@ -210,7 +210,7 @@ const Pagination: FunctionComponent<ComponentProps> = (
     const isCurrentPage: boolean = pageNumber === currentPageNumber;
 
     return (
-      <li className="hidden sm:flex" key={`page-${pageNumber}`}>
+      <li className="max-sm:hidden sm:flex" key={`page-${pageNumber}`}>
         <button
           type="button"
           data-testid={`pagination-page-${pageNumber}`}
@@ -244,7 +244,7 @@ const Pagination: FunctionComponent<ComponentProps> = (
 
   const getEllipsis: GetEllipsisFunction = (key: string): ReactElement => {
     return (
-      <li className="hidden sm:flex" key={key}>
+      <li className="max-sm:hidden sm:flex" key={key}>
         <button
           type="button"
           data-testid={`pagination-${key}`}
@@ -372,7 +372,7 @@ const Pagination: FunctionComponent<ComponentProps> = (
             </li>
 
             {isHasMoreMode && (
-              <li className="hidden sm:flex">
+              <li className="max-sm:hidden sm:flex">
                 <span
                   data-testid="pagination-current-page-indicator-desktop"
                   aria-current="page"

package/UI/Components/ProgressButtons/ProgressButtonItem.tsx

@@ -85,7 +85,7 @@ const ProgressButtonItem: FunctionComponent<ComponentProps> = (
 
       {!props.isLastStep && (
         <div
-          className="absolute right-0 top-0 hidden h-full w-5 md:block"
+          className="absolute right-0 top-0 max-md:hidden h-full w-5 md:block"
           aria-hidden="true"
         >
           <svg

package/UI/Components/SideMenu/SideMenu.tsx

@@ -532,8 +532,11 @@ const SideMenu: FunctionComponent<ComponentProps> = (props: ComponentProps) => {
        * ("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.
+       *
+       * `max-md:hidden`, not `hidden`, for the reason given on the NavBar's
+       * desktop view: a foreign `.hidden` rule must not remove the menu.
        */
-      className={`hidden md:block w-56 lg:w-64 flex-shrink-0 mb-10 ${props.className || ""}`}
+      className={`max-md:hidden md:block w-56 lg:w-64 flex-shrink-0 mb-10 ${props.className || ""}`}
       role="navigation"
       aria-label="Main navigation"
     >

package/UI/Components/StatusPage/ResourceGroupNavigator.tsx

@@ -504,8 +504,10 @@ const ResourceGroupNavigator: FunctionComponent<ComponentProps> = (
          * likely to want to act on. Its count is the thing given up for it, and
          * the pane beside it is already showing that number.
          */
-        className={`absolute inset-y-0 right-0 items-center gap-0.5 rounded-r-md pl-4 pr-1 group-hover/nav-row:flex group-focus-within/nav-row:flex ${
-          isSelected ? "flex bg-indigo-50" : "hidden bg-gray-100"
+        className={`absolute inset-y-0 right-0 items-center gap-0.5 rounded-r-md pl-4 pr-1 flex ${
+          isSelected
+            ? "bg-indigo-50"
+            : "bg-gray-100 group-[:not(:hover):not(:focus-within)]/nav-row:hidden"
         }`}
         data-testid="status-page-resource-navigator-actions"
       >

package/UI/Components/StatusPage/ResourceList.tsx

@@ -124,7 +124,7 @@ const SELECT_COLUMN_CLASS_NAME: string = "flex w-7 flex-shrink-0 items-center";
  * the monitor's name and the rows are already in the order it describes.
  */
 const POSITION_COLUMN_CLASS_NAME: string =
-  "hidden w-6 flex-shrink-0 text-right text-xs tabular-nums sm:block";
+  "max-sm:hidden w-6 flex-shrink-0 text-right text-xs tabular-nums sm:block";
 const MONITOR_COLUMN_CLASS_NAME: string = "min-w-0 flex-[2_1_0%]";
 /*
  * Its own line on a phone, indented to sit under the monitor it renames rather
@@ -512,7 +512,7 @@ const ResourceList: FunctionComponent<ComponentProps> = (
     return (
       <div
         className={`${
-          props.isSelectable ? "flex" : "hidden sm:flex"
+          props.isSelectable ? "flex" : "max-sm:hidden sm:flex"
         } items-center gap-x-3 rounded-t-xl border-b border-gray-200 bg-gray-50 px-4 py-2 text-[11px] font-semibold uppercase tracking-wide text-gray-500 sm:flex`}
         data-testid="status-page-resource-list-header"
       >
@@ -540,7 +540,7 @@ const ResourceList: FunctionComponent<ComponentProps> = (
         )}
 
         <span
-          className={`${GRIP_COLUMN_CLASS_NAME} hidden sm:block`}
+          className={`${GRIP_COLUMN_CLASS_NAME} max-sm:hidden sm:block`}
           aria-hidden="true"
         />
         <span
@@ -551,19 +551,19 @@ const ResourceList: FunctionComponent<ComponentProps> = (
           #
         </span>
         <span
-          className={`${MONITOR_COLUMN_CLASS_NAME} hidden sm:block`}
+          className={`${MONITOR_COLUMN_CLASS_NAME} max-sm:hidden sm:block`}
           aria-hidden="true"
         >
           Monitor
         </span>
         <span
-          className={`${PUBLISHED_NAME_COLUMN_CLASS_NAME} hidden sm:block`}
+          className={`${PUBLISHED_NAME_COLUMN_CLASS_NAME} max-sm:hidden sm:block`}
           aria-hidden="true"
         >
           Shown on the status page as
         </span>
         <span
-          className={`${ACTIONS_COLUMN_CLASS_NAME} hidden sm:flex`}
+          className={`${ACTIONS_COLUMN_CLASS_NAME} max-sm:hidden sm:flex`}
           aria-hidden="true"
         />
       </div>

package/UI/Components/TelemetryViewer/components/TelemetryFacetSidebar.tsx

@@ -149,7 +149,7 @@ const TelemetryFacetSidebar: FunctionComponent<TelemetryFacetSidebarProps> = (
     <div
       id={props.id}
       className={`${
-        props.isCollapsedOnSmallScreens ? "hidden md:flex" : "flex"
+        props.isCollapsedOnSmallScreens ? "max-md:hidden md:flex" : "flex"
       } max-h-80 w-full flex-none flex-col overflow-y-auto rounded-lg border border-gray-200 bg-white md:h-full md:max-h-none md:w-56`}
     >
       <div className="border-b border-gray-100 px-3 py-2.5">

package/UI/Components/TelemetryViewer/components/TelemetryFacetValueRow.tsx

@@ -100,7 +100,7 @@ const TelemetryFacetValueRow: FunctionComponent<TelemetryFacetValueRowProps> = (
 
       <button
         type="button"
-        className="hidden h-5 w-5 items-center justify-center rounded text-[10px] text-gray-400 transition-colors hover:bg-red-50 hover:text-red-500 group-hover:flex"
+        className="flex h-5 w-5 items-center justify-center rounded text-[10px] text-gray-400 transition-colors hover:bg-red-50 hover:text-red-500 group-[:not(:hover)]:hidden"
         onClick={(e: React.MouseEvent) => {
           e.stopPropagation();
           props.onExclude(props.value);

package/UI/Components/Workflow/ColumnEditor/ModelQueryBuilder.tsx

@@ -69,7 +69,7 @@ const ModelQueryBuilder: FunctionComponent<ComponentProps> = (
         ) : (
           <>
             {/* Column widths must stay in step with ColumnConditionRow's grid. */}
-            <div className="hidden border-b border-gray-100 bg-gray-50/60 px-3 py-1.5 text-[10px] font-semibold uppercase tracking-[0.08em] text-gray-400 sm:grid sm:grid-cols-[minmax(0,1fr)_minmax(0,0.85fr)_minmax(0,1.3fr)_auto] sm:gap-2">
+            <div className="max-sm:hidden border-b border-gray-100 bg-gray-50/60 px-3 py-1.5 text-[10px] font-semibold uppercase tracking-[0.08em] text-gray-400 sm:grid sm:grid-cols-[minmax(0,1fr)_minmax(0,0.85fr)_minmax(0,1.3fr)_auto] sm:gap-2">
               <span>Column</span>
               <span>Comparison</span>
               <span>Value</span>

package/UI/Components/Workflow/ComponentsModal.tsx

@@ -391,7 +391,7 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
                         : "Searches title, description, and category."}
                     </span>
                     {!hasSearchTerm && (
-                      <span className="hidden items-center gap-1 rounded-full bg-slate-100 px-2 py-1 font-medium text-slate-500 sm:inline-flex">
+                      <span className="max-sm:hidden items-center gap-1 rounded-full bg-slate-100 px-2 py-1 font-medium text-slate-500 sm:inline-flex">
                         <kbd className="rounded bg-white px-1.5 py-0.5 text-[10px] font-semibold text-slate-500 ring-1 ring-slate-200">
                           /
                         </kbd>
@@ -399,7 +399,7 @@ const ComponentsModal: FunctionComponent<ComponentProps> = (
                       </span>
                     )}
                     {hasSearchTerm && (
-                      <span className="hidden items-center gap-1 rounded-full bg-indigo-50 px-2 py-1 font-medium text-indigo-600 sm:inline-flex">
+                      <span className="max-sm:hidden items-center gap-1 rounded-full bg-indigo-50 px-2 py-1 font-medium text-indigo-600 sm:inline-flex">
                         <kbd className="rounded bg-white px-1.5 py-0.5 text-[10px] font-semibold text-indigo-600 ring-1 ring-indigo-100">
                           Esc
                         </kbd>

package/UI/Components/Workflow/StepTraceViewer.tsx

@@ -135,7 +135,7 @@ const StepRow: FunctionComponent<StepRowProps> = (
         </span>
 
         {props.step.executedPort && (
-          <span className="text-xs text-gray-500 shrink-0 hidden sm:inline">
+          <span className="text-xs text-gray-500 shrink-0 max-sm:hidden sm:inline">
             → {props.step.executedPort}
           </span>
         )}

package/UI/Styles/Theme.css

@@ -307,7 +307,14 @@ html.dark :is(
     [class~="hover:text-gray-900"]
   ):hover,
 html.dark [class~="focus:text-gray-900"]:focus,
-html.dark .group:hover [class*="group-hover"][class*="text-gray-"] {
+html.dark .group:hover [class*="group-hover"][class*="text-gray-"],
+/*
+ * `group-[:not(:hover)]:hidden` is a group-hover reveal written so a foreign
+ * `.hidden { display: none !important }` cannot pin it shut (see Common's
+ * NavBar desktop view). It must brighten on hover exactly as the
+ * `hidden group-hover:flex` it replaced did.
+ */
+html.dark .group:hover [class*="group-[:not(:hover)"][class*="text-gray-"] {
   color: var(--ou-text-primary) !important;
 }
 

package/UI/Utils/Navigation.ts

@@ -221,7 +221,9 @@ abstract class Navigation {
         continue;
       }
 
-      if (routeItems[start]?.toString() !== item.toString()) {
+      if (
+        !this.isSameSegment(routeItems[start], item, { caseSensitive: false })
+      ) {
         startsWith = false;
         break;
       }
@@ -233,60 +235,95 @@ abstract class Navigation {
 
   public static isOnThisPage(route: Route | URL): boolean {
     if (route instanceof Route) {
-      const current: Route = this.getCurrentRoute();
+      return this.isCurrentRoute(route, { caseSensitive: false });
+    }
 
-      let isOnThisPage: boolean = true;
+    if (route instanceof URL) {
+      const current: URL = this.getCurrentURL();
 
-      /*
-       * React Router resolves `/page` and `/page/` to the same route. Match
-       * that behavior here so side-menu selection and the compact mobile
-       * label do not disappear when a bookmarked URL carries a trailing
-       * slash. Keep `/` intact so the root route still has a segment.
-       */
-      const trimTrailingSlashes: (path: string) => string = (
-        path: string,
-      ): string => {
-        return path.length > 1 ? path.replace(/\/+$/, "") : path;
-      };
-      const routeItems: Array<string> = trimTrailingSlashes(
-        route.toString(),
-      ).split("/");
-      const currentPathItems: Array<string> = trimTrailingSlashes(
-        current.toString(),
-      ).split("/");
-      if (routeItems.length !== currentPathItems.length) {
-        return false;
+      if (current.toString() === route.toString()) {
+        return true;
       }
 
-      let start: number = 0;
-      for (const item of currentPathItems) {
-        if (routeItems[start]?.startsWith(":") && item) {
-          start++;
-          continue;
-        }
+      return false;
+    }
 
-        if (routeItems[start]?.toString() !== item.toString()) {
-          isOnThisPage = false;
-          break;
-        }
+    return false;
+  }
 
-        start++;
-      }
+  /*
+   * React Router matches paths case-insensitively (a <Route> is case
+   * sensitive only when it opts in, and none of ours do), so
+   * `/dashboard/<id>/SSO` renders the SSO page. Questions like "is the user
+   * on that page?" (hide the nav bar there, mark a side-menu entry active)
+   * must agree with the page the router rendered, so they compare segments
+   * the same way. Route validation only admits ASCII, so toLowerCase() is
+   * exact here.
+   *
+   * A Route whose parameters are already filled in carries no ":" segments,
+   * so its parameter values are compared without case too. The values
+   * checked this way today are ids, where case does not matter, but these
+   * checks cannot tell apart two resources whose names differ only by case.
+   * navigate() keeps the exact comparison for that reason.
+   */
+  private static isSameSegment(
+    routeSegment: string | undefined,
+    currentSegment: string,
+    options: { caseSensitive: boolean },
+  ): boolean {
+    if (routeSegment === undefined) {
+      return false;
+    }
 
-      return isOnThisPage;
+    if (options.caseSensitive) {
+      return routeSegment === currentSegment;
     }
 
-    if (route instanceof URL) {
-      const current: URL = this.getCurrentURL();
+    return routeSegment.toLowerCase() === currentSegment.toLowerCase();
+  }
 
-      if (current.toString() === route.toString()) {
-        return true;
-      }
+  private static isCurrentRoute(
+    route: Route,
+    options: { caseSensitive: boolean },
+  ): boolean {
+    const current: Route = this.getCurrentRoute();
 
+    /*
+     * React Router resolves `/page` and `/page/` to the same route. Match
+     * that behavior here so side-menu selection and the compact mobile
+     * label do not disappear when a bookmarked URL carries a trailing
+     * slash. Keep `/` intact so the root route still has a segment.
+     */
+    const trimTrailingSlashes: (path: string) => string = (
+      path: string,
+    ): string => {
+      return path.length > 1 ? path.replace(/\/+$/, "") : path;
+    };
+    const routeItems: Array<string> = trimTrailingSlashes(
+      route.toString(),
+    ).split("/");
+    const currentPathItems: Array<string> = trimTrailingSlashes(
+      current.toString(),
+    ).split("/");
+    if (routeItems.length !== currentPathItems.length) {
       return false;
     }
 
-    return false;
+    let start: number = 0;
+    for (const item of currentPathItems) {
+      if (routeItems[start]?.startsWith(":") && item) {
+        start++;
+        continue;
+      }
+
+      if (!this.isSameSegment(routeItems[start], item, options)) {
+        return false;
+      }
+
+      start++;
+    }
+
+    return true;
   }
 
   public static goBack(): void {
@@ -357,7 +394,17 @@ abstract class Navigation {
       return;
     }
 
-    if (this.navigateHook && to instanceof Route && !this.isOnThisPage(to)) {
+    /*
+     * Exact, unlike isOnThisPage: a target can differ from the current path
+     * only in the case of a parameter value (a container named "Web" vs
+     * "web"), which React Router passes through as-is, so it is a different
+     * page, and dropping that navigation would strand the user.
+     */
+    if (
+      this.navigateHook &&
+      to instanceof Route &&
+      !this.isCurrentRoute(to, { caseSensitive: true })
+    ) {
       this.navigateHook(finalUrl);
     }
 

package/UI/Utils/Telemetry/TelemetryEntityNames.ts

@@ -1,6 +1,7 @@
 import Alert from "../../../Models/DatabaseModels/Alert";
 import CephCluster from "../../../Models/DatabaseModels/CephCluster";
 import CloudResource from "../../../Models/DatabaseModels/CloudResource";
+import DatabaseServer from "../../../Models/DatabaseModels/DatabaseServer";
 import BaseModel from "../../../Models/DatabaseModels/DatabaseBaseModel/DatabaseBaseModel";
 import DockerHost from "../../../Models/DatabaseModels/DockerHost";
 import DockerSwarmCluster from "../../../Models/DatabaseModels/DockerSwarmCluster";
@@ -137,6 +138,11 @@ export const TELEMETRY_ENTITY_TYPES: Record<
     modelType: CloudResource,
     nameFields: ["name", "resourceIdentifier"],
   },
+  [ServiceType.DatabaseServer]: {
+    label: "Database",
+    modelType: DatabaseServer,
+    nameFields: ["name"],
+  },
   [ServiceType.NetworkDevice]: {
     label: "Network Device",
     modelType: NetworkDevice,
@@ -190,6 +196,7 @@ export const TELEMETRY_ENTITY_RESOLUTION_ORDER: Array<ServiceType> = [
   ServiceType.KubernetesCluster,
   ServiceType.ServerlessFunction,
   ServiceType.CloudResource,
+  ServiceType.DatabaseServer,
   ServiceType.IoTDevice,
   ServiceType.ProxmoxCluster,
   ServiceType.CephCluster,

package/UI/Utils/TelemetryService.ts

@@ -24,7 +24,7 @@ export const UNKNOWN_SERVICE_NAME: string = "Unknown Service";
  * OpenTelemetry service, or the synthetic "Unknown Service" for the
  * unattributed bucket) — or a plain `label` for infrastructure resource
  * types (Host / DockerHost / KubernetesCluster / ProxmoxCluster /
- * CephCluster / VMwareVCenter) that have no Service row.
+ * CephCluster / VMwareVCenter / DatabaseServer) that have no Service row.
  */
 export interface ResolvedTelemetryResource {
   service?: Service;
@@ -67,8 +67,8 @@ export default class TelemetryServiceUtil {
    * old server-side `service` ORM relation on TelemetryException: a real
    * Service resolves from the loaded list, the unattributed bucket resolves
    * to the synthetic "Unknown Service", and Host / DockerHost /
-   * KubernetesCluster / ProxmoxCluster / CephCluster / VMwareVCenter
-   * resolve to a type label (no Service row exists for them). Mirrors how the ClickHouse
+   * KubernetesCluster / ProxmoxCluster / CephCluster / VMwareVCenter /
+   * DatabaseServer resolve to a type label (no Service row exists for them). Mirrors how the ClickHouse
    * analytics rows are resolved.
    */
   public static resolveTelemetryResource(data: {
@@ -107,6 +107,7 @@ export default class TelemetryServiceUtil {
       [ServiceType.ProxmoxCluster]: "Proxmox Cluster",
       [ServiceType.CephCluster]: "Ceph Cluster",
       [ServiceType.VMwareVCenter]: "vCenter",
+      [ServiceType.DatabaseServer]: "Database telemetry",
     };
     const label: string | undefined = data.primaryEntityType
       ? typeLabels[data.primaryEntityType.toString()]