@orsetra/shared-ui 1.5.9 → 1.5.11

package/components/layout/user-panel.tsx

@@ -92,7 +92,7 @@ export function UserPanel({ main_base_url }: UserPanelProps) {
               </button>
               {currentProject && organization && (
                 <a
-                  href={`${main_base_url}/projects/${currentProject.id}`}
+                  href={`${main_base_url}/business-units/${currentProject.id}`}
                   onClick={close}
                   className="text-xs text-[#0f62fe] hover:underline"
                 >

package/components/ui/file-chip.tsx

@@ -0,0 +1,62 @@
+"use client"
+
+import { FileCode, X } from "lucide-react"
+
+export interface FileChipProps {
+  file: { name: string; id?: string }
+  isActive: boolean
+  isEditing: boolean
+  disabled?: boolean
+  onSelect: () => void
+  onDelete: (e: React.MouseEvent) => void
+  onNameChange: (name: string) => void
+  onEditStart: () => void
+  onEditEnd: () => void
+}
+
+export function FileChip({ file, isActive, isEditing, disabled, onSelect, onDelete, onNameChange, onEditStart, onEditEnd }: FileChipProps) {
+  const showInput = isEditing || file.name === ""
+
+  return (
+    <div
+      onClick={onSelect}
+      className={`flex items-center gap-1 px-2 py-0.5 text-xs cursor-pointer border transition-colors shrink-0 ${
+        isActive
+          ? "border-ibm-blue-60 bg-white text-ibm-blue-60"
+          : "border-ibm-gray-20 bg-white text-ibm-gray-70 hover:border-ibm-gray-40"
+      }`}
+    >
+      <FileCode className="w-3 h-3 shrink-0 flex-none" />
+
+      {showInput ? (
+        <input
+          autoFocus
+          type="text"
+          value={file.name}
+          onChange={(e) => onNameChange(e.target.value)}
+          onBlur={onEditEnd}
+          onClick={(e) => e.stopPropagation()}
+          placeholder="filename.yaml"
+          className="w-24 text-xs outline-none border-b border-ibm-blue-40 bg-transparent placeholder:text-ibm-gray-40 text-ibm-gray-100"
+        />
+      ) : (
+        <span
+          className="truncate max-w-[120px]"
+          onDoubleClick={(e) => { e.stopPropagation(); if (isActive) onEditStart() }}
+        >
+          {file.name}
+        </span>
+      )}
+
+      {!disabled && (
+        <button
+          type="button"
+          onClick={(e) => { e.stopPropagation(); onDelete(e) }}
+          className="ml-0.5 hover:text-red-500 transition-colors flex-none"
+        >
+          <X className="w-3 h-3" />
+        </button>
+      )}
+    </div>
+  )
+}

package/components/ui/resources-input.tsx

@@ -0,0 +1,158 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "./button"
+import { Plus } from "lucide-react"
+import { SecretInput } from "./secret-input"
+import { FileChip } from "./file-chip"
+
+interface ResourcesInputProps {
+  id?: string
+  value?: string[]
+  onChange?: (value: string[]) => void
+  disabled?: boolean
+  [key: string]: any
+}
+
+const SECRET_PREFIX = "secret:"
+const BASE_PATH = "/etc"
+
+function parseItem(item: string): { name: string; path: string } {
+  const raw = item.startsWith(SECRET_PREFIX) ? item.slice(SECRET_PREFIX.length) : item
+  const at = raw.indexOf("@")
+  if (at === -1) return { name: raw, path: BASE_PATH }
+  return { name: raw.slice(0, at), path: raw.slice(at + 1) }
+}
+
+function buildItem(name: string, path: string): string {
+  return `${SECRET_PREFIX}${name}@${path}`
+}
+
+function pathSuffix(path: string): string {
+  return path.startsWith(BASE_PATH) ? path.slice(BASE_PATH.length) : path
+}
+
+export function ResourcesInput({ id, value = [], onChange, disabled = false, ...rest }: ResourcesInputProps) {
+  const [items, setItems] = useState<string[]>(value.filter(Boolean))
+  const [draft, setDraft] = useState("")
+  const [editingNameIndex, setEditingNameIndex] = useState<number | null>(null)
+  const [editingPathIndex, setEditingPathIndex] = useState<number | null>(null)
+  const [editingPathSuffix, setEditingPathSuffix] = useState("")
+
+  useEffect(() => {
+    const filtered = value.filter(Boolean)
+    if (JSON.stringify(filtered) !== JSON.stringify(items)) {
+      setItems(filtered)
+    }
+  }, [value])
+
+  const handleAdd = () => {
+    if (!draft || items.includes(draft)) return
+    const next = [...items, draft]
+    setItems(next)
+    onChange?.(next)
+    setDraft("")
+  }
+
+  const handleRemove = (index: number) => {
+    const next = items.filter((_, i) => i !== index)
+    setItems(next)
+    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)
+    setEditingPathSuffix(pathSuffix(path))
+  }
+
+  const confirmPathEdit = (index: number) => {
+    const { name } = parseItem(items[index])
+    const fullPath = `${BASE_PATH}${editingPathSuffix}`
+    const next = items.map((item, i) => i === index ? buildItem(name, fullPath) : item)
+    setItems(next)
+    onChange?.(next)
+    setEditingPathIndex(null)
+  }
+
+  return (
+    <div className="space-y-2">
+      {items.map((item, index) => {
+        const { name, path } = parseItem(item)
+        const suffix = pathSuffix(path)
+        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>
+                <input
+                  autoFocus
+                  value={editingPathSuffix}
+                  onChange={(e) => setEditingPathSuffix(e.target.value)}
+                  onBlur={() => confirmPathEdit(index)}
+                  onKeyDown={(e) => {
+                    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"
+                  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"
+                }`}
+              >
+                <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>
+              </span>
+            )}
+          </div>
+        )
+      })}
+
+      <div className="flex gap-2">
+        <div className="flex-1">
+          <SecretInput value={draft} onChange={setDraft} disabled={disabled} type={id} />
+        </div>
+        <Button
+          type="button"
+          variant="secondary"
+          onClick={handleAdd}
+          disabled={disabled || !draft}
+          className="rounded-none h-10 w-10 p-0 shrink-0"
+        >
+          <Plus className="h-3.5 w-3.5" />
+        </Button>
+      </div>
+    </div>
+  )
+}

package/components/ui/secret-context.tsx

@@ -6,23 +6,28 @@ import type { ReactNode } from "react"
 export interface SecretEntry {
   name: string
   description?: string
+  labels?: string[]
+  template?: string
 }
 
 interface SecretContextValue {
   secretsMap: Map<string, SecretEntry[]>
+  loading: boolean
 }
 
 const SecretContext = createContext<SecretContextValue | null>(null)
 
 export function SecretContextProvider({
   children,
+  loading = false,
   secretsMap,
 }: {
   children: ReactNode
+  loading?: boolean
   secretsMap: Map<string, SecretEntry[]>
 }) {
   return (
-    <SecretContext.Provider value={{ secretsMap }}>
+    <SecretContext.Provider value={{ secretsMap, loading }}>
       {children}
     </SecretContext.Provider>
   )

package/components/ui/secret-input.tsx

@@ -2,6 +2,7 @@
 
 import { SelectInput } from "./select-input"
 import { useSecretContext } from "./secret-context"
+import { Loader2 } from "lucide-react"
 
 interface SecretInputProps {
   id?: string
@@ -31,16 +32,20 @@ export function SecretInput({
       </div>
     )
   }
+
   const secrets = ctx.secretsMap.get(type || 'configs') || []
   return (
-    <SelectInput
-      id={id}
-      value={value}
-      onChange={onChange}
-      disabled={disabled}
-      className={className}
-      placeholder={placeholder}
-      options={secrets.map((s) => ({ label: s.description || s.name, value: `secret:${s.name}` }))}
-    />
+    <div className="flex items-center gap-2">
+      <SelectInput
+        id={id}
+        value={value}
+        onChange={onChange}
+        disabled={disabled || ctx.loading}
+        className={className}
+        placeholder={ctx.loading ? "Loading…" : placeholder}
+        options={secrets.map((s) => ({ label: s.description || s.name, value: s.name }))}
+      />
+      {ctx.loading && <Loader2 className="h-4 w-4 animate-spin text-ibm-blue-60 flex-shrink-0" />}
+    </div>
   )
 }

package/package.json

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

package/components/ui/secret-explorer.tsx

@@ -1,274 +0,0 @@
-"use client"
-
-import { useState, useEffect } from "react"
-import { Button } from "./button"
-import { Card, CardContent, CardHeader, CardTitle } from "./card"
-import { Key, Plus, Trash2, Folder, File, ChevronRight } from "lucide-react"
-import { useToast } from "../../hooks/use-toast"
-
-import type { Secrets } from "@/app/secrets/models"
-
-interface SecretExplorerProps {
-  currentPath: string
-  onPathChange: (path: string) => void
-  getSecrets: (path: string) => Promise<Secrets>
-  deleteSecret: (path: string) => Promise<boolean>
-  selectedSecret: string | null
-  onSecretSelect: (secret: string | null) => void
-  onCreateClick: () => void
-  onRefresh?: () => void
-}
-
-export function SecretExplorer({
-  currentPath,
-  onPathChange,
-  getSecrets,
-  deleteSecret,
-  selectedSecret,
-  onSecretSelect,
-  onCreateClick,
-  onRefresh
-}: SecretExplorerProps) {
-  const { toast } = useToast()
-  const [secretPaths, setSecretPaths] = useState<string[]>([])
-  const [loading, setLoading] = useState(true)
-  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
-  const [selectedSecretForAction, setSelectedSecretForAction] = useState<string | null>(null)
-
-  useEffect(() => {
-    loadSecrets()
-  }, [currentPath])
-
-  const loadSecrets = async () => {
-    try {
-      const secretsResponse: Secrets = await getSecrets(currentPath || "/")
-      const paths = secretsResponse.data?.keys || []
-      setSecretPaths(paths)
-    } catch (error) {
-      // Navigate up if current path is invalid
-      if (currentPath) {
-        const pathParts = currentPath.split('/').filter(Boolean)
-        pathParts.pop()
-        const newPath = pathParts.length > 0 ? pathParts.join('/') + '/' : ""
-        onPathChange(newPath)
-      }
-      toast({
-        variant: "destructive",
-        title: "Error loading secrets",
-        description: "Failed to fetch configuration secrets."
-      })
-    } finally {
-      setLoading(false)
-    }
-  }
-
-  const handleItemClick = async (path: string) => {
-    if (path.endsWith('/')) {
-      // It's a folder, navigate into it
-      const newPath = currentPath ? `${currentPath}${path}` : path
-      onPathChange(newPath)
-      onSecretSelect(null)
-    } else {
-      // It's a secret, show details
-      onSecretSelect(path)
-    }
-  }
-
-  const getBreadcrumbs = () => {
-    if (!currentPath) return [{ name: "Root", path: "" }]
-    
-    const parts = currentPath.split('/').filter(Boolean)
-    const breadcrumbs = [{ name: "Root", path: "" }]
-    
-    let accumulatedPath = ""
-    parts.forEach((part, index) => {
-      accumulatedPath += part + "/"
-      breadcrumbs.push({
-        name: part,
-        path: accumulatedPath
-      })
-    })
-    
-    return breadcrumbs
-  }
-
-  const handleDeleteSecret = async () => {
-    if (!selectedSecretForAction) return
-
-    try {
-      const fullPath = currentPath ? `${currentPath}${selectedSecretForAction}` : selectedSecretForAction
-      await deleteSecret(fullPath)
-      
-      toast({
-        variant: "success",
-        title: "Secret deleted successfully",
-        description: `Configuration "${selectedSecretForAction}" has been deleted.`
-      })
-
-      setShowDeleteDialog(false)
-      setSelectedSecretForAction(null)
-      loadSecrets()
-      
-      // Clear details if this was the selected secret
-      if (selectedSecret === selectedSecretForAction) {
-        onSecretSelect(null)
-      }
-    } catch (error) {
-      console.error("Error deleting secret:", error)
-      toast({
-        variant: "destructive",
-        title: "Error deleting secret",
-        description: "Failed to delete configuration secret."
-      })
-    }
-  }
-
-  if (loading) {
-    return (
-      <Card className="border border-ibm-gray-20">
-        <CardHeader className="pb-3">
-          <div className="animate-pulse">
-            <div className="h-6 bg-ibm-gray-20 mb-2"></div>
-            <div className="h-4 bg-ibm-gray-20"></div>
-          </div>
-        </CardHeader>
-        <CardContent className="p-0">
-          <div className="animate-pulse">
-            <div className="h-32 bg-ibm-gray-20"></div>
-          </div>
-        </CardContent>
-      </Card>
-    )
-  }
-
-  return (
-    <>
-      <Card className="border border-ibm-gray-20">
-        <CardHeader className="pb-3">
-          <div className="flex items-center justify-between">
-            <CardTitle className="text-lg font-medium">Secrets Explorer</CardTitle>
-            <Button variant="ghost" size="sm" onClick={onCreateClick}>
-              <Plus className="w-4 h-4" />
-            </Button>
-          </div>
-          
-          {/* Breadcrumbs */}
-          <div className="flex items-center gap-1 text-xs text-ibm-gray-70 mt-2">
-            {getBreadcrumbs().map((crumb, index) => (
-              <div key={crumb.path} className="flex items-center gap-1">
-                {index > 0 && <ChevronRight className="w-3 h-3" />}
-                <button
-                  onClick={() => {
-                    onPathChange(crumb.path)
-                    onSecretSelect(null)
-                  }}
-                  className={`hover:text-ibm-blue-60 ${
-                    crumb.path === currentPath ? "text-ibm-blue-60 font-medium" : ""
-                  }`}
-                >
-                  {crumb.name}
-                </button>
-              </div>
-            ))}
-          </div>
-        </CardHeader>
-
-        <CardContent className="p-0">
-          {/* File List */}
-          <div className="border-t border-ibm-gray-20">
-            {secretPaths.length === 0 ? (
-              <div className="p-8 text-center">
-                <Key className="w-8 h-8 text-ibm-gray-30 mx-auto mb-2" />
-                <p className="text-sm text-ibm-gray-70">
-                  Empty folder
-                </p>
-              </div>
-            ) : (
-              <div className="divide-y divide-ibm-gray-20">
-                {secretPaths.map((path) => {
-                  const isFolder = path.endsWith('/')
-                  const displayName = isFolder ? path.slice(0, -1) : path
-                  const isSelected = selectedSecret === path
-                  
-                  return (
-                    <div
-                      key={path}
-                      className={`group flex items-center gap-3 px-4 py-3 hover:bg-ibm-gray-10 cursor-pointer transition-colors ${
-                        isSelected ? "bg-ibm-blue-10 border-r-2 border-ibm-blue-60" : ""
-                      }`}
-                      onClick={() => handleItemClick(path)}
-                    >
-                      <div className="flex-shrink-0">
-                        {isFolder ? (
-                          <Folder className="w-4 h-4 text-ibm-yellow-60" />
-                        ) : (
-                          <File className="w-4 h-4 text-ibm-blue-60" />
-                        )}
-                      </div>
-                      <span className="text-sm text-ibm-gray-100 flex-1 truncate">
-                        {displayName}
-                      </span>
-                      
-                      {!isFolder && (
-                        <Button
-                          variant="ghost"
-                          size="xs"
-                          leftIcon={<Trash2 className="w-3 h-3" />}
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            setSelectedSecretForAction(path)
-                            setShowDeleteDialog(true)
-                          }}
-                          className="opacity-0 group-hover:opacity-100 transition-opacity text-ibm-red-60 hover:text-ibm-red-70 hover:bg-ibm-red-10"
-                        >
-                        </Button>
-                      )}
-                    </div>
-                  )
-                })}
-              </div>
-            )}
-          </div>
-        </CardContent>
-      </Card>
-
-      {/* Delete Confirmation Dialog */}
-      <div
-        className={`fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 ${
-          showDeleteDialog ? 'block' : 'hidden'
-        }`}
-        onClick={() => setShowDeleteDialog(false)}
-      >
-        <div
-          className="bg-white p-6 rounded-lg max-w-md w-full mx-4"
-          onClick={(e) => e.stopPropagation()}
-        >
-          <h3 className="text-lg font-medium text-ibm-gray-100 mb-2">Delete Secret</h3>
-          <p className="text-sm text-ibm-gray-70 mb-6">
-            Are you sure you want to delete the secret "{selectedSecretForAction}"? 
-            This action cannot be undone and will permanently remove all secret data.
-          </p>
-          <div className="flex justify-end gap-3">
-            <Button
-              variant="secondary"
-              size="sm"
-              style={{ borderRadius: 0 }}
-              onClick={() => setShowDeleteDialog(false)}
-            >
-              Cancel
-            </Button>
-            <Button
-              variant="danger"
-              style={{ borderRadius: 0 }}
-              leftIcon={<Trash2 className="w-3 h-3" />}
-              size="sm"
-              onClick={handleDeleteSecret}
-            >
-              Delete Secret
-            </Button>
-          </div>
-        </div>
-      </div>
-    </>
-  )
-}