@orsetra/shared-ui 1.5.11 → 1.5.13

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

@@ -56,11 +56,12 @@ export function MainSidebar({
       onSecondarySidebarOpen()
     }
 
-    const rawUrl = item.href ?? `${main_base_url}/${menuId}`
-    const path = rawUrl.startsWith('http://') || rawUrl.startsWith('https://')
-      ? new URL(rawUrl).pathname
-      : rawUrl
-    window.location.href = path
+    if (item.href) {
+      const path = item.href.startsWith('http://') || item.href.startsWith('https://')
+        ? new URL(item.href).pathname
+        : item.href
+      window.location.href = path
+    }
 
     if (!isMinimized) {
       onToggle()
@@ -126,34 +127,58 @@ export function MainSidebar({
             const isActive = currentMenu === item.id
             const isExpanded = expandedMenu === item.id
 
+            const itemHref = !hasSubMenu && item.href
+              ? (item.href.startsWith('http://') || item.href.startsWith('https://')
+                  ? new URL(item.href).pathname
+                  : item.href)
+              : undefined
+
+            const itemClassName = cn(
+              "w-full flex items-center text-left transition-all duration-150 font-medium",
+              isMinimized ? "justify-center p-3" : "gap-3 px-3 py-2",
+              isActive
+                ? "bg-interactive/10 text-interactive border-l-4 border-interactive"
+                : "text-text-primary hover:bg-ui-background border-l-4 border-transparent"
+            )
+
+            const itemContent = (
+              <>
+                <Icon className={cn(
+                  "h-5 w-5 flex-shrink-0",
+                  isActive ? "text-interactive" : "text-text-secondary"
+                )} />
+                {!isMinimized && (
+                  <>
+                    <span className="text-base flex-1">{item.label}</span>
+                    {hasSubMenu && (
+                      isExpanded
+                        ? <ChevronDown className="h-4 w-4 text-text-secondary flex-shrink-0" />
+                        : <ChevronRight className="h-4 w-4 text-text-secondary flex-shrink-0" />
+                    )}
+                  </>
+                )}
+              </>
+            )
+
             return (
               <div key={item.id}>
-                <button
-                  onClick={() => handleMenuClick(item)}
-                  className={cn(
-                    "w-full flex items-center text-left transition-all duration-150 font-medium",
-                    isMinimized ? "justify-center p-3" : "gap-3 px-3 py-2",
-                    isActive
-                      ? "bg-interactive/10 text-interactive border-l-4 border-interactive"
-                      : "text-text-primary hover:bg-ui-background border-l-4 border-transparent"
-                  )}
-                  title={isMinimized ? item.label : undefined}
-                >
-                  <Icon className={cn(
-                    "h-5 w-5 flex-shrink-0",
-                    isActive ? "text-interactive" : "text-text-secondary"
-                  )} />
-                  {!isMinimized && (
-                    <>
-                      <span className="text-base flex-1">{item.label}</span>
-                      {hasSubMenu && (
-                        isExpanded
-                          ? <ChevronDown className="h-4 w-4 text-text-secondary flex-shrink-0" />
-                          : <ChevronRight className="h-4 w-4 text-text-secondary flex-shrink-0" />
-                      )}
-                    </>
-                  )}
-                </button>
+                {itemHref ? (
+                  <a
+                    href={itemHref}
+                    className={itemClassName}
+                    title={isMinimized ? item.label : undefined}
+                  >
+                    {itemContent}
+                  </a>
+                ) : (
+                  <button
+                    onClick={() => handleMenuClick(item)}
+                    className={itemClassName}
+                    title={isMinimized ? item.label : undefined}
+                  >
+                    {itemContent}
+                  </button>
+                )}
 
                 {/* Inline accordion sub-items */}
                 {!isMinimized && isExpanded && hasSubMenu && (

package/components/layout/sidebar/sidebar.tsx

@@ -197,9 +197,9 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
 
   const filteredMainItems = React.useMemo(() => {
     if (!isCollapsed || mainMenuItems.length === 0) return []
-    // Exclude items that match the current menu context OR appear in the secondary nav
+    // Exclude items that match the current menu context OR appear in the secondary nav OR have no href
     const navIds = new Set(currentNavigation.map((n) => n.id))
-    return mainMenuItems.filter((item) => item.id !== currentMenu && !navIds.has(item.id))
+    return mainMenuItems.filter((item) => item.id !== currentMenu && !navIds.has(item.id) && !!item.href)
   }, [isCollapsed, mainMenuItems, currentNavigation, currentMenu])
 
   return (
@@ -300,8 +300,9 @@ function Sidebar({ currentMenu, onMainMenuToggle, sidebarMenus = {}, main_base_u
           <>
             <div className="border-t border-ui-border mx-1 my-2" />
             {filteredMainItems.map((item) => {
-              const rawHref = item.href || `${main_base_url}/${item.id}`
-              const href = rawHref.startsWith('http') ? new URL(rawHref).pathname : rawHref
+              const href = item.href!.startsWith('http://') || item.href!.startsWith('https://')
+                ? new URL(item.href!).pathname
+                : item.href!
               const linkEl = (
                 <Link
                   key={item.id}

package/components/ui/detail-page-header.tsx

@@ -102,7 +102,7 @@ export function DetailPageHeader({
 
         {/* Tab bar — always rendered to keep header height consistent */}
         <nav
-          className={`flex gap-0 overflow-x-auto -mx-4 sm:-mx-6 px-4 sm:px-6 min-h-10 ${
+          className={`flex gap-0  px-4 sm:px-6 min-h-10 ${
             tabBarPosition === "right" ? "justify-end" : "justify-start"
           }`}
           aria-label="Tabs"

package/components/ui/index.ts

@@ -64,6 +64,7 @@ export { ToggleGroup, ToggleGroupItem } from './toggle-group'
 export { Toggle } from './toggle'
 export { StringsInput } from './strings-input'
 export { KVInput } from './kv-input'
+export { ResourcesInput } from './resources-input'
 export { NumbersInput } from './numbers-input'
 export { KVDynamicInput } from './kv-dynamic-input'
 export { SelectInput } from './select-input'
@@ -73,4 +74,5 @@ export { SecretsInput } from './secrets-input'
 export { StructsInput } from './structs-input'
 export { CodeEditor } from './code-editor'
 export { K8sObjectsCode } from './k8s-objects-code'
+export { FileChip } from './file-chip'
 export { EnvironmentPickerDialog, type EnvironmentPickerDialogProps } from './environment-picker-dialog'

package/components/ui/resources-input.tsx

@@ -1,10 +1,9 @@
 "use client"
 
-import { useState, useEffect } from "react"
+import { useState, useEffect, useRef } from "react"
 import { Button } from "./button"
-import { Plus } from "lucide-react"
+import { Plus, X, FileCode } from "lucide-react"
 import { SecretInput } from "./secret-input"
-import { FileChip } from "./file-chip"
 
 interface ResourcesInputProps {
   id?: string
@@ -29,18 +28,29 @@ function buildItem(name: string, path: string): string {
 }
 
 function pathSuffix(path: string): string {
-  return path.startsWith(BASE_PATH) ? path.slice(BASE_PATH.length) : path
+  const after = path.startsWith(BASE_PATH) ? path.slice(BASE_PATH.length) : path
+  return after.startsWith("/") ? after.slice(1) : after
 }
 
-export function ResourcesInput({ id, value = [], onChange, disabled = false, ...rest }: ResourcesInputProps) {
-  const [items, setItems] = useState<string[]>(value.filter(Boolean))
+export function ResourcesInput({ id, value, onChange, disabled = false, ...rest }: ResourcesInputProps) {
+  const normalize = (v: any): string[] =>
+    Array.isArray(v) ? v.filter(Boolean).map((item) => item.startsWith(SECRET_PREFIX) ? item : buildItem(parseItem(item).name, parseItem(item).path)) : []
+  const [items, setItems] = useState<string[]>(normalize(value))
   const [draft, setDraft] = useState("")
-  const [editingNameIndex, setEditingNameIndex] = useState<number | null>(null)
   const [editingPathIndex, setEditingPathIndex] = useState<number | null>(null)
   const [editingPathSuffix, setEditingPathSuffix] = useState("")
+  const mounted = useRef(false)
 
   useEffect(() => {
-    const filtered = value.filter(Boolean)
+    const filtered = normalize(value)
+    if (!mounted.current) {
+      mounted.current = true
+      const raw = Array.isArray(value) ? value.filter(Boolean) : []
+      if (JSON.stringify(filtered) !== JSON.stringify(raw)) {
+        onChange?.(filtered)
+      }
+      return
+    }
     if (JSON.stringify(filtered) !== JSON.stringify(items)) {
       setItems(filtered)
     }
@@ -60,17 +70,6 @@ export function ResourcesInput({ id, value = [], onChange, disabled = false, ...
     onChange?.(next)
   }
 
-  const handleNameChange = (index: number, newName: string) => {
-    const { path } = parseItem(items[index])
-    const next = items.map((item, i) => i === index ? buildItem(newName, path) : item)
-    setItems(next)
-  }
-
-  const handleNameEditEnd = (index: number) => {
-    setEditingNameIndex(null)
-    onChange?.(items)
-  }
-
   const startPathEditing = (index: number, path: string) => {
     if (disabled) return
     setEditingPathIndex(index)
@@ -79,7 +78,7 @@ export function ResourcesInput({ id, value = [], onChange, disabled = false, ...
 
   const confirmPathEdit = (index: number) => {
     const { name } = parseItem(items[index])
-    const fullPath = `${BASE_PATH}${editingPathSuffix}`
+    const fullPath = `${BASE_PATH}/${editingPathSuffix}`
     const next = items.map((item, i) => i === index ? buildItem(name, fullPath) : item)
     setItems(next)
     onChange?.(next)
@@ -91,23 +90,25 @@ export function ResourcesInput({ id, value = [], onChange, disabled = false, ...
       {items.map((item, index) => {
         const { name, path } = parseItem(item)
         const suffix = pathSuffix(path)
+        const isEditingPath = editingPathIndex === index
+
         return (
-          <div key={index} className="flex items-center gap-2">
-            <FileChip
-              file={{ name, id: String(index) }}
-              isActive={editingNameIndex === index}
-              isEditing={editingNameIndex === index}
-              disabled={disabled}
-              onSelect={() => {}}
-              onDelete={(e) => handleRemove(index)}
-              onNameChange={(newName) => handleNameChange(index, newName)}
-              onEditStart={() => setEditingNameIndex(index)}
-              onEditEnd={() => handleNameEditEnd(index)}
-            />
-
-            {editingPathIndex === index ? (
-              <div className="flex flex-1 items-center border border-ibm-blue-60 bg-white min-w-0 h-10">
-                <span className="px-2 text-sm font-mono text-ibm-gray-40 shrink-0 select-none">{BASE_PATH}</span>
+          <div
+            key={index}
+            className={`flex items-center h-10 bg-white transition-colors ${
+              isEditingPath ? "" : "border border-ibm-gray-20 hover:border-ibm-gray-40"
+            }`}
+          >
+            {/* Name */}
+            <div className="flex items-center gap-1.5 px-3 shrink-0 border-r border-ibm-gray-20">
+              <FileCode className="w-3 h-3 text-ibm-gray-50 shrink-0" />
+              <span className="text-xs font-mono text-ibm-gray-100">{name}</span>
+            </div>
+
+            {/* Path */}
+            {isEditingPath ? (
+              <div className="flex flex-1 items-center px-3 min-w-0">
+                <span className="text-sm font-mono text-ibm-gray-40 shrink-0 select-none">{BASE_PATH}/</span>
                 <input
                   autoFocus
                   value={editingPathSuffix}
@@ -117,24 +118,35 @@ export function ResourcesInput({ id, value = [], onChange, disabled = false, ...
                     if (e.key === "Enter") confirmPathEdit(index)
                     if (e.key === "Escape") setEditingPathIndex(null)
                   }}
-                  className="flex-1 text-sm font-mono text-ibm-gray-100 bg-transparent focus:outline-none pr-2 min-w-0"
+                  className="flex-1 text-sm font-mono text-ibm-gray-100 bg-transparent focus:outline-none min-w-0"
                   placeholder="/myapp"
                 />
               </div>
             ) : (
               <span
                 onDoubleClick={() => startPathEditing(index, path)}
-                title={disabled ? undefined : "Double-click to edit"}
-                className={`flex flex-1 items-center border border-ibm-gray-20 bg-white h-10 px-3 font-mono text-sm truncate min-w-0 ${
-                  disabled ? "text-ibm-gray-40" : "cursor-text hover:border-ibm-gray-40"
+                title={disabled ? undefined : "Double-click to edit path"}
+                className={`flex flex-1 items-center px-3 min-w-0 text-sm font-mono ${
+                  disabled ? "cursor-default" : "cursor-text"
                 }`}
               >
-                <span className="text-ibm-gray-40 shrink-0">{BASE_PATH}</span>
-                <span className={suffix ? "text-ibm-gray-70" : "text-ibm-gray-40 italic"}>
-                  {suffix || "/…"}
+                <span className="text-ibm-gray-40 shrink-0">{BASE_PATH}/</span>
+                <span className={`truncate ${suffix ? "text-ibm-gray-70" : "text-ibm-gray-40 italic"}`}>
+                  {suffix || "…"}
                 </span>
               </span>
             )}
+
+            {/* Delete */}
+            {!disabled && (
+              <button
+                type="button"
+                onClick={() => handleRemove(index)}
+                className="px-2 h-full flex items-center text-ibm-gray-40 hover:text-red-500 transition-colors shrink-0 border-l border-ibm-gray-20"
+              >
+                <X className="w-3.5 h-3.5" />
+              </button>
+            )}
           </div>
         )
       })}

package/components/ui/secret-input.tsx

@@ -32,7 +32,7 @@ export function SecretInput({
       </div>
     )
   }
-
+ console.log(type)
   const secrets = ctx.secretsMap.get(type || 'configs') || []
   return (
     <div className="flex items-center gap-2">

package/components/ui/secrets-input.tsx

@@ -1,8 +1,8 @@
 "use client"
 
-import { useState, useEffect } from "react"
+import { useState, useEffect, useRef } from "react"
 import { Button } from "./button"
-import { X, Plus } from "lucide-react"
+import { X, Plus, FileCode } from "lucide-react"
 import { SecretInput } from "./secret-input"
 
 interface SecretsInputProps {
@@ -13,20 +13,43 @@ interface SecretsInputProps {
   [key: string]: any
 }
 
-export function SecretsInput({ id, value = [], onChange, disabled = false, ...rest }: SecretsInputProps) {
-  const [items, setItems] = useState<string[]>(value.filter(Boolean))
+const SECRET_PREFIX = "secret:"
+
+function parseName(item: string): string {
+  return item.startsWith(SECRET_PREFIX) ? item.slice(SECRET_PREFIX.length) : item
+}
+
+function buildItem(name: string): string {
+  return `${SECRET_PREFIX}${name}`
+}
+
+export function SecretsInput({ id, value, onChange, disabled = false, ...rest }: SecretsInputProps) {
+  const normalize = (v: any): string[] =>
+    Array.isArray(v) ? v.filter(Boolean).map((item) => item.startsWith(SECRET_PREFIX) ? item : buildItem(item)) : []
+  const [items, setItems] = useState<string[]>(normalize(value))
   const [draft, setDraft] = useState("")
+  const mounted = useRef(false)
 
   useEffect(() => {
-    const filtered = value.filter(Boolean)
+    const filtered = normalize(value)
+    if (!mounted.current) {
+      mounted.current = true
+      const raw = Array.isArray(value) ? value.filter(Boolean) : []
+      if (JSON.stringify(filtered) !== JSON.stringify(raw)) {
+        onChange?.(filtered)
+      }
+      return
+    }
     if (JSON.stringify(filtered) !== JSON.stringify(items)) {
       setItems(filtered)
     }
   }, [value])
 
   const handleAdd = () => {
-    if (!draft || items.includes(draft)) return
-    const next = [...items, draft]
+    if (!draft) return
+    const built = buildItem(draft)
+    if (items.includes(built)) return
+    const next = [...items, built]
     setItems(next)
     onChange?.(next)
     setDraft("")
@@ -41,19 +64,26 @@ export function SecretsInput({ id, value = [], onChange, disabled = false, ...re
   return (
     <div className="space-y-2">
       {items.map((item, index) => (
-        <div key={index} className="flex items-center gap-2">
-          <span className="flex-1 text-sm px-3 h-10 flex items-center border border-ibm-gray-20 bg-ibm-gray-10 text-ibm-gray-100 truncate font-mono">
-            {item}
-          </span>
-          <Button
-            type="button"
-            variant="secondary"
-            onClick={() => handleRemove(index)}
-            disabled={disabled}
-            className="rounded-none h-10 w-10 p-0 shrink-0"
-          >
-            <X className="h-3.5 w-3.5" />
-          </Button>
+        <div
+          key={index}
+          className="flex items-center h-10 border border-ibm-gray-20 bg-white hover:border-ibm-gray-40 transition-colors"
+        >
+          <div className="flex items-center gap-1.5 px-3 flex-1 min-w-0">
+            <FileCode className="w-3 h-3 text-ibm-gray-50 shrink-0" />
+            <span className="text-xs font-mono text-ibm-gray-100 truncate">
+              {parseName(item)}
+            </span>
+          </div>
+
+          {!disabled && (
+            <button
+              type="button"
+              onClick={() => handleRemove(index)}
+              className="px-2 h-full flex items-center text-ibm-gray-40 hover:text-red-500 transition-colors shrink-0 border-l border-ibm-gray-20"
+            >
+              <X className="w-3.5 h-3.5" />
+            </button>
+          )}
         </div>
       ))}
 

package/package.json

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