@orsetra/shared-ui 1.10.5 → 1.10.7

package/components/layout/sidebar/data.tsx

@@ -55,6 +55,8 @@ export interface SubMenuItem {
   icon:        LucideIcon
   applied?:    boolean
   target?:     string
+  /** True when the href still has an unresolved "${...}" placeholder (e.g. no project/environment selected yet) — render as non-navigable. */
+  disabled?:   boolean
 }
 
 export interface SidebarMenus {

package/components/layout/sidebar/main-sidebar-flyout.tsx

@@ -78,13 +78,18 @@ export function MainSidebarFlyout({
               return (
                 <a
                   key={sub.id}
-                  href={sub.href}
+                  href={sub.disabled ? undefined : sub.href}
                   target={sub.target}
                   rel={sub.target === "_blank" ? "noopener noreferrer" : undefined}
+                  aria-disabled={sub.disabled}
+                  title={sub.disabled ? "Select a project/environment first" : undefined}
+                  onClick={(e) => { if (sub.disabled) e.preventDefault() }}
                   className={cn(
                     "flex items-start transition-colors border-l-4",
                     "px-2 lg:px-3 py-2 gap-x-3",
-                    "hover:bg-ui-background border-transparent hover:border-interactive",
+                    sub.disabled
+                      ? "opacity-40 cursor-not-allowed border-transparent"
+                      : "hover:bg-ui-background border-transparent hover:border-interactive",
                   )}
                 >
                   <SubIcon className="h-4 w-4 flex-shrink-0 mt-0.5" style={{ color: "#4589ff" }} />

package/components/layout/sidebar/main-sidebar.tsx

@@ -11,6 +11,7 @@ import { X, Menu, ChevronDown, ChevronRight } from "lucide-react"
 import { useIsMobile } from "../../../hooks/use-mobile"
 import { MainSidebarFlyout, type FlyoutDefaultLink } from "./main-sidebar-flyout"
 import { useQuickAccess } from "../../../hooks/use-quick-access"
+import { resolveTemplateVars } from "./template-vars"
 
 export type { FlyoutDefaultLink }
 
@@ -75,36 +76,6 @@ export function MainSidebar({
     setHoveredItem(item)
   }
 
-  const applyTemplateVars = (href: string): string => {
-    // Guard: SSR has no window/localStorage
-    if (typeof window === "undefined") return href
-    try {
-      const projRaw = localStorage.getItem("current-business-unit")
-      const envRaw  = localStorage.getItem("current-environment")
-      // Parse carefully: value may be null (not yet set), invalid JSON, or a non-object
-      const currentProject = typeof projRaw === "string"
-        ? (JSON.parse(projRaw)?.state?.currentProject ?? "")
-        : ""
-      const currentEnv = typeof envRaw === "string"
-        ? (JSON.parse(envRaw)?.state?.currentEnv ?? "")
-        : ""
-      // Only replace when the value is a non-empty string; if empty, leave the
-      // placeholder in the URL so the link is visibly broken rather than silently
-      // producing a protocol-relative URL (e.g. "//path") that navigates incorrectly.
-      let result = href
-      if (currentProject && typeof currentProject === "string") {
-        result = result.replace(/\$\{currentProject\}/g, currentProject)
-      }
-      if (currentEnv && typeof currentEnv === "string") {
-        result = result.replace(/\$\{currentEnv\}/g, currentEnv)
-      }
-      return result
-    } catch {
-      // localStorage blocked (Safari private mode), JSON parse error, etc. — return unchanged
-      return href
-    }
-  }
-
   const safeUrlPathname = (url: string): string => {
     try { return new URL(url).pathname } catch { return "/" }
   }
@@ -124,34 +95,40 @@ export function MainSidebar({
     if (!isMinimized && onSecondarySidebarOpen) onSecondarySidebarOpen()
 
     if (item.href) {
-      try {
-        const resolved = applyTemplateVars(item.href)
-        const path = resolved.startsWith('http://') || resolved.startsWith('https://')
-          ? safeUrlPathname(resolved)
-          : resolved
-        window.location.href = path
-      } catch {
-        // navigation error — don't crash the sidebar
+      const { href: resolved, isResolved } = resolveTemplateVars(item.href)
+      if (isResolved) {
+        try {
+          const path = resolved.startsWith('http://') || resolved.startsWith('https://')
+            ? safeUrlPathname(resolved)
+            : resolved
+          window.location.href = path
+        } catch {
+          // navigation error — don't crash the sidebar
+        }
       }
+      // Unresolved (missing project/environment context): do nothing rather than navigate to a
+      // URL with a literal "${...}" in it.
     }
 
     if (!isMinimized) onToggle()
   }
 
-  const buildSubItemHref = (menuId: string, href: string): string => {
-    try {
-      const resolved = applyTemplateVars(href)
-      if (resolved.startsWith('http://') || resolved.startsWith('https://')) {
-        return resolved  // keep full URL for external links
-      }
-      const cleanHref = resolved.replace(/^\//, '')
-      const cleanBase = (main_base_url.startsWith('http://') || main_base_url.startsWith('https://'))
-        ? safeUrlPathname(main_base_url).replace(/\/$/, '')
-        : (main_base_url ?? "").replace(/\/$/, '')
-      return `${cleanBase}/${menuId}/${cleanHref}`
-    } catch {
-      return "/"
+  interface ResolvedSubItemHref {
+    href:     string
+    disabled: boolean
+  }
+
+  const buildSubItemHref = (menuId: string, href: string): ResolvedSubItemHref => {
+    const { href: resolved, isResolved } = resolveTemplateVars(href)
+    if (!isResolved) return { href: "#", disabled: true }
+    if (resolved.startsWith('http://') || resolved.startsWith('https://')) {
+      return { href: resolved, disabled: false }  // keep full URL for external links
     }
+    const cleanHref = resolved.replace(/^\//, '')
+    const cleanBase = (main_base_url.startsWith('http://') || main_base_url.startsWith('https://'))
+      ? safeUrlPathname(main_base_url).replace(/\/$/, '')
+      : (main_base_url ?? "").replace(/\/$/, '')
+    return { href: `${cleanBase}/${menuId}/${cleanHref}`, disabled: false }
   }
 
   // Default flyout content derived from the menu metadata
@@ -167,7 +144,8 @@ export function MainSidebar({
 
   const handleSubMenuClick = (e: React.MouseEvent, menuId: string, href: string, target?: string) => {
     e.preventDefault()
-    const resolved = buildSubItemHref(menuId, href)
+    const { href: resolved, disabled } = buildSubItemHref(menuId, href)
+    if (disabled) return
     if (target === "_blank") {
       window.open(resolved, "_blank", "noopener,noreferrer")
     } else {
@@ -228,15 +206,12 @@ export function MainSidebar({
               const isExpanded   = expandedMenu === item.id
               const isFlyActive  = hoveredItem?.id === item.id
 
-              const itemHref = !hasSubMenu && item.href
-                ? (() => {
-                    try {
-                      const resolved = applyTemplateVars(item.href)
-                      return resolved.startsWith('http://') || resolved.startsWith('https://')
-                        ? safeUrlPathname(resolved)
-                        : resolved
-                    } catch { return item.href }
-                  })()
+              const itemTemplate = !hasSubMenu && item.href ? resolveTemplateVars(item.href) : null
+              const itemDisabled = !!itemTemplate && !itemTemplate.isResolved
+              const itemHref = itemTemplate && itemTemplate.isResolved
+                ? (itemTemplate.href.startsWith('http://') || itemTemplate.href.startsWith('https://')
+                    ? safeUrlPathname(itemTemplate.href)
+                    : itemTemplate.href)
                 : undefined
 
               const itemCls = cn(
@@ -277,7 +252,13 @@ export function MainSidebar({
                       {itemContent}
                     </a>
                   ) : (
-                    <button onClick={() => handleMenuClick(item)} className={itemCls} title={isMinimized ? item.label : undefined}>
+                    <button
+                      onClick={itemDisabled ? undefined : () => handleMenuClick(item)}
+                      disabled={itemDisabled}
+                      aria-disabled={itemDisabled}
+                      className={cn(itemCls, itemDisabled && "opacity-40 cursor-not-allowed pointer-events-none")}
+                      title={itemDisabled ? "Select a project/environment first" : (isMinimized ? item.label : undefined)}
+                    >
                       {itemContent}
                     </button>
                   )}
@@ -288,19 +269,32 @@ export function MainSidebar({
                       <p className="px-2 pt-1 pb-0.5 text-[10px] font-semibold text-text-secondary uppercase tracking-widest">
                         {item.label}
                       </p>
-                      {sidebarMenus[item.id].map((subItem) => (
-                        <a
-                          key={subItem.id}
-                          href={buildSubItemHref(item.id, subItem.href)}
-                          target={subItem.target}
-                          rel={subItem.target === "_blank" ? "noopener noreferrer" : undefined}
-                          onClick={(e) => handleSubMenuClick(e, item.id, subItem.href, subItem.target)}
-                          className="flex items-center gap-2 lg:gap-3 px-2 lg:px-3 py-1.5 lg:py-2 text-sm text-text-secondary hover:bg-ui-background hover:text-text-primary transition-colors no-underline border-l-2 border-ui-border hover:border-interactive"
-                        >
-                          <subItem.icon className="h-4 w-4 flex-shrink-0 text-text-secondary" />
-                          {subItem.name}
-                        </a>
-                      ))}
+                      {sidebarMenus[item.id].map((subItem) => {
+                        const { href: subHref, disabled: subDisabled } = buildSubItemHref(item.id, subItem.href)
+                        return (
+                          <a
+                            key={subItem.id}
+                            href={subDisabled ? undefined : subHref}
+                            target={subItem.target}
+                            rel={subItem.target === "_blank" ? "noopener noreferrer" : undefined}
+                            aria-disabled={subDisabled}
+                            title={subDisabled ? "Select a project/environment first" : undefined}
+                            onClick={(e) => {
+                              if (subDisabled) { e.preventDefault(); return }
+                              handleSubMenuClick(e, item.id, subItem.href, subItem.target)
+                            }}
+                            className={cn(
+                              "flex items-center gap-2 lg:gap-3 px-2 lg:px-3 py-1.5 lg:py-2 text-sm transition-colors no-underline border-l-2",
+                              subDisabled
+                                ? "text-text-secondary/40 border-ui-border cursor-not-allowed"
+                                : "text-text-secondary hover:bg-ui-background hover:text-text-primary border-ui-border hover:border-interactive",
+                            )}
+                          >
+                            <subItem.icon className="h-4 w-4 flex-shrink-0 text-text-secondary" />
+                            {subItem.name}
+                          </a>
+                        )
+                      })}
                     </div>
                   )}
                 </div>
@@ -315,10 +309,10 @@ export function MainSidebar({
           <MainSidebarFlyout
             item={hoveredItem}
             subItems={hoveredItem
-              ? (sidebarMenus[hoveredItem.id] ?? []).map(sub => ({
-                  ...sub,
-                  href: buildSubItemHref(hoveredItem.id, sub.href),
-                }))
+              ? (sidebarMenus[hoveredItem.id] ?? []).map(sub => {
+                  const { href, disabled } = buildSubItemHref(hoveredItem.id, sub.href)
+                  return { ...sub, href, disabled }
+                })
               : []
             }
             onMouseEnter={cancelCloseTimer}

package/components/layout/sidebar/sidebar.tsx

@@ -20,6 +20,7 @@ import {
 } from "../../ui/tooltip"
 import { type SidebarMenus, type SubMenuItem, type MainMenuItem } from "./data"
 import { Skeleton } from "../skeleton"
+import { resolveTemplateVars } from "./template-vars"
 
 // ── Dynamic secondary navigation ──────────────────────────────────────────────
 
@@ -323,38 +324,37 @@ function Sidebar({ currentMenu, sidebarMenus = {}, main_base_url = "", sectionLa
             ? item.id === activeItemId
             : (pathname === itemPath || pathname.startsWith(`${itemPath}/`))
 
+          // Resolved once so the anchor's `href` attribute itself is already correct — not just
+          // the JS click handler — so middle-click / right-click "open in new tab" (which bypass
+          // onClick entirely) don't navigate to a literal "${envAlias}"-style broken URL.
+          const templateResolution = item.target === "_blank" ? resolveTemplateVars(item.href) : null
+          const isDisabled = !!templateResolution && !templateResolution.isResolved
+          const resolvedHref = templateResolution ? templateResolution.href : item.href
+
           const handleClick = (e: React.MouseEvent) => {
-            const href = item.href
+            if (isDisabled) {
+              e.preventDefault()
+              return
+            }
             if (item.target === "_blank") {
               e.preventDefault()
-              try {
-                let resolved = href
-                if (typeof window !== "undefined") {
-                  const projRaw = localStorage.getItem("current-business-unit")
-                  const cp = typeof projRaw === "string" ? (JSON.parse(projRaw)?.state?.currentProject ?? "") : ""
-                  if (cp) resolved = resolved.replace(/\$\{currentProject\}/g, cp)
-                  const envRaw = localStorage.getItem("current-environment")
-                  const ce = typeof envRaw === "string" ? (JSON.parse(envRaw)?.state?.currentEnv ?? "") : ""
-                  if (ce) resolved = resolved.replace(/\$\{currentEnv\}/g, ce)
-                }
-                window.open(resolved, "_blank", "noopener,noreferrer")
-              } catch {
-                window.open(href, "_blank", "noopener,noreferrer")
-              }
+              window.open(resolvedHref, "_blank", "noopener,noreferrer")
               return
             }
-            if (href.startsWith('http://') || href.startsWith('https://')) {
+            if (resolvedHref.startsWith('http://') || resolvedHref.startsWith('https://')) {
               e.preventDefault()
-              window.location.href = new URL(href).pathname
+              window.location.href = new URL(resolvedHref).pathname
             }
           }
 
           const linkCls = cn(
             "flex items-center transition-colors border-l-4",
             isCollapsed ? "justify-center p-2" : "px-2 lg:px-3 py-1.5 lg:py-2 gap-x-3 text-sm",
-            isActive
-              ? "bg-interactive/10 text-interactive font-medium border-interactive"
-              : "text-text-secondary hover:bg-ui-background hover:text-text-primary border-transparent"
+            isDisabled
+              ? "opacity-40 cursor-not-allowed text-text-secondary border-transparent"
+              : isActive
+                ? "bg-interactive/10 text-interactive font-medium border-interactive"
+                : "text-text-secondary hover:bg-ui-background hover:text-text-primary border-transparent"
           )
 
           const linkContent = (
@@ -372,8 +372,10 @@ function Sidebar({ currentMenu, sidebarMenus = {}, main_base_url = "", sectionLa
           const linkEl = item.target === "_blank" ? (
             <a
               key={item.id}
-              href={item.href}
+              href={isDisabled ? undefined : resolvedHref}
               onClick={handleClick}
+              aria-disabled={isDisabled}
+              title={isDisabled ? "Select a project/environment first" : undefined}
               className={linkCls}
             >
               {linkContent}

package/components/layout/sidebar/template-vars.ts

@@ -0,0 +1,73 @@
+// Resolves "${currentProject}"/"${currentEnv}"/"${envAlias}" placeholders in menu hrefs (see
+// apps/platform/app/data/menu.ts) against whichever app's Zustand-persisted project/environment
+// store happens to be on localStorage for the current origin.
+//
+// There is no single shared store: every app under this platform owns its own
+// `store/project-store.ts` / `store/app-store.ts` Zustand instance, and each persists under its
+// own localStorage key (`persist({ name: ... })`). Since this sidebar is rendered inside every
+// app, it has to know all of those key names to find the right value regardless of which app's
+// page it's currently showing. Keep this list in sync with each app's own store file.
+const PROJECT_STORAGE_KEYS = [
+  "current-business-unit",
+  "network-manager-project",
+]
+
+const ENVIRONMENT_STORAGE_KEYS = [
+  "current-environment",
+  "api-manager-current-environment",
+  "auth-manager-current-environment",
+  "network-manager-environment",
+  "monitoring-app-state",
+]
+
+const PLACEHOLDER_PATTERN = /\$\{[a-zA-Z_]+\}/
+
+/** Reads `state[stateKey]` from the first of `keys` that holds a non-empty string value. */
+function readFirstMatch(keys: string[], stateKey: string): string {
+  for (const key of keys) {
+    try {
+      const raw = localStorage.getItem(key)
+      if (!raw) continue
+      const value = JSON.parse(raw)?.state?.[stateKey]
+      if (typeof value === "string" && value) return value
+    } catch {
+      // Invalid JSON / blocked storage (Safari private mode) — try the next key.
+    }
+  }
+  return ""
+}
+
+export interface TemplateResolution {
+  /** `href` with every placeholder that had a value substituted in. */
+  href: string
+  /** False when one or more "${...}" placeholders are still present — required context is missing. */
+  isResolved: boolean
+}
+
+/**
+ * Replaces "${currentProject}", "${currentEnv}" and "${envAlias}" in `href` with values read
+ * from localStorage. A placeholder with no available value is left in place — callers must check
+ * `isResolved` and disable the link rather than navigate to a URL with a literal "${...}" in it
+ * or silently substitute an empty string (which can turn an absolute URL into a broken
+ * protocol-relative one, e.g. "//path").
+ */
+export function resolveTemplateVars(href: string): TemplateResolution {
+  // Guard: SSR has no window/localStorage — treat as unresolved so server-rendered markup never
+  // claims a link is usable before the client can actually check.
+  if (typeof window === "undefined") {
+    return { href, isResolved: !PLACEHOLDER_PATTERN.test(href) }
+  }
+
+  let result = href
+
+  const currentProject = readFirstMatch(PROJECT_STORAGE_KEYS, "currentProject")
+  if (currentProject) result = result.replace(/\$\{currentProject\}/g, currentProject)
+
+  const currentEnv = readFirstMatch(ENVIRONMENT_STORAGE_KEYS, "currentEnv")
+  if (currentEnv) result = result.replace(/\$\{currentEnv\}/g, currentEnv)
+
+  const envAlias = readFirstMatch(ENVIRONMENT_STORAGE_KEYS, "currentEnvAlias") || currentEnv
+  if (envAlias) result = result.replace(/\$\{envAlias\}/g, envAlias)
+
+  return { href: result, isResolved: !PLACEHOLDER_PATTERN.test(result) }
+}

package/components/ui/relative-time-range-picker.tsx

@@ -26,11 +26,30 @@ export interface RelativeTimeRangePickerProps {
   triggerLabel?: string
 }
 
+const DAY_SECONDS = 24 * 60 * 60
+
+// Refreshed periodically (see the interval effect below) so the label doesn't drift far
+// from reality if the picker is left open for a while without the selection changing.
+const REFRESH_INTERVAL_MS = 30_000
+
+const timeFormatter = new Intl.DateTimeFormat(undefined, { hour: "2-digit", minute: "2-digit", hour12: false })
+const dayFormatter = new Intl.DateTimeFormat(undefined, { month: "short", day: "numeric" })
+
+/** "Since 14:32" for hour/minute-scale options, "Since Aug 18, 14:32" once the option spans a day or more. */
+function formatSince(sinceMs: number, isDayScale: boolean): string {
+  const date = new Date(sinceMs)
+  const time = timeFormatter.format(date)
+  return isDayScale ? `Since ${dayFormatter.format(date)}, ${time}` : `Since ${time}`
+}
+
 /**
  * Flyout picker for a small set of relative time ranges (20m, 1h, 3h, ...), styled as a gallery
  * of choices rather than a dropdown list — the current selection is highlighted with both a
  * filled background and a check mark (not color alone), mirroring how Calendar marks the
  * selected day and Combobox marks the selected item in this same component set.
+ *
+ * The trigger shows the resolved absolute start of the window ("Since ...") rather than the
+ * bare option label, so the picker doubles as a readout of what's actually being queried.
  */
 export function RelativeTimeRangePicker({
   id,
@@ -45,6 +64,23 @@ export function RelativeTimeRangePicker({
   const [open, setOpen] = React.useState(false)
   const selected = options.find(o => o.seconds === value)
 
+  const [now, setNow] = React.useState(() => Date.now())
+
+  // Freshen immediately on selection change and whenever the flyout opens.
+  React.useEffect(() => {
+    setNow(Date.now())
+  }, [value, open])
+
+  // ...and keep it from going stale while left open/mounted without interaction.
+  React.useEffect(() => {
+    const interval = setInterval(() => setNow(Date.now()), REFRESH_INTERVAL_MS)
+    return () => clearInterval(interval)
+  }, [])
+
+  const triggerText = selected
+    ? formatSince(now - selected.seconds * 1000, selected.seconds >= DAY_SECONDS)
+    : "Select…"
+
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
@@ -59,7 +95,7 @@ export function RelativeTimeRangePicker({
           leftIcon={<Clock className="h-3.5 w-3.5" />}
           rightIcon={<ChevronDown className="h-3.5 w-3.5 opacity-60" />}
         >
-          {selected?.label ?? "Select…"}
+          {triggerText}
         </Button>
       </PopoverTrigger>
       <PopoverContent align={align} sideOffset={6} className="w-auto rounded-none p-2">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orsetra/shared-ui",
-  "version": "1.10.5",
+  "version": "1.10.7",
   "description": "Shared UI components for Orsetra platform",
   "main": "./index.ts",
   "types": "./index.ts",