@orsetra/shared-ui 1.10.8 → 1.10.10

package/components/layout/sidebar/sidebar.tsx

@@ -324,12 +324,11 @@ 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
+          // Resolved unconditionally so middle-click/right-click (which bypass onClick) never
+          // navigate to a literal "${envAlias}"-style unresolved URL.
+          const templateResolution = resolveTemplateVars(item.href)
+          const isDisabled = !templateResolution.isResolved
+          const resolvedHref = templateResolution.href
 
           const handleClick = (e: React.MouseEvent) => {
             if (isDisabled) {
@@ -383,8 +382,10 @@ function Sidebar({ currentMenu, sidebarMenus = {}, main_base_url = "", sectionLa
           ) : (
             <Link
               key={item.id}
-              href={item.href}
+              href={isDisabled ? "#" : resolvedHref}
               onClick={handleClick}
+              aria-disabled={isDisabled}
+              title={isDisabled ? "Select a project/environment first" : undefined}
               className={linkCls}
             >
               {linkContent}

package/components/ui/access-denied-state.tsx

@@ -0,0 +1,32 @@
+import * as React from "react"
+import { Lock } from "lucide-react"
+import { cn } from "../../lib/utils"
+
+export interface AccessDeniedStateProps {
+  resourceName: string
+  message?: string
+  className?: string
+}
+
+export function AccessDeniedState({ resourceName, message, className }: AccessDeniedStateProps) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col md:flex-row items-center justify-center gap-8 md:gap-12 p-6 md:p-12 min-h-[450px] bg-white text-center md:text-left",
+        className
+      )}
+    >
+      <div className="flex-shrink-0 h-40 w-40 bg-red-50 flex items-center justify-center">
+        <Lock className="h-20 w-20 text-red-200" />
+      </div>
+      <div className="max-w-md">
+        <h2 className="text-xl md:text-2xl font-semibold text-ibm-gray-100 mb-3 text-center md:text-left">
+          Access denied
+        </h2>
+        <p className="text-ibm-gray-60 text-sm md:text-base leading-relaxed text-center md:text-left">
+          {message ?? `You don't have permission to view ${resourceName} in this business unit.`}
+        </p>
+      </div>
+    </div>
+  )
+}

package/components/ui/index.ts

@@ -24,6 +24,7 @@ export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './
 export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from './alert-dialog'
 export { Alert, AlertTitle, AlertDescription } from './alert'
 export { AlertBanner, useAlertBanner, type AlertBannerProps, type AlertState } from './alert-banner'
+export { AccessDeniedState, type AccessDeniedStateProps } from './access-denied-state'
 export { ConfirmationDialog, type ConfirmationDialogProps } from './confirmation-dialog'
 export { AspectRatio } from './aspect-ratio'
 export { Badge } from './badge'

package/package.json

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