@orsetra/shared-ui 1.0.0 → 1.0.1

package/components/ui/secret-explorer.tsx

@@ -0,0 +1,274 @@
+"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>
+    </>
+  )
+}