@wakastellar/ui 2.1.2 → 2.3.2

package/src/components/waka-migration-list/index.tsx

@@ -0,0 +1,487 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { Badge } from "../badge"
+import { Button } from "../button"
+import { ScrollArea } from "../scroll-area"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../tooltip"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../dropdown-menu"
+import {
+  Database,
+  ArrowUp,
+  ArrowDown,
+  RotateCcw,
+  CheckCircle2,
+  XCircle,
+  Clock,
+  Play,
+  Pause,
+  AlertTriangle,
+  MoreVertical,
+  FileCode,
+  Calendar,
+  User,
+  Timer,
+  ChevronDown,
+  ChevronRight,
+} from "lucide-react"
+
+export type MigrationStatus = "pending" | "applied" | "failed" | "rolled_back" | "running"
+
+export interface Migration {
+  id: string
+  version: string
+  name: string
+  description?: string
+  status: MigrationStatus
+  appliedAt?: Date
+  rolledBackAt?: Date
+  duration?: number // in ms
+  author?: string
+  checksum?: string
+  upScript?: string
+  downScript?: string
+  error?: string
+}
+
+export interface WakaMigrationListProps {
+  /** List of migrations */
+  migrations: Migration[]
+  /** Callback when applying a migration */
+  onApply?: (migration: Migration) => void
+  /** Callback when rolling back a migration */
+  onRollback?: (migration: Migration) => void
+  /** Callback when viewing migration details */
+  onViewDetails?: (migration: Migration) => void
+  /** Current database version */
+  currentVersion?: string
+  /** Show scripts */
+  showScripts?: boolean
+  /** Title */
+  title?: string
+  /** Custom class name */
+  className?: string
+}
+
+const statusConfig: Record<MigrationStatus, { label: string; icon: React.ElementType; color: string; bgColor: string }> = {
+  pending: { label: "Pending", icon: Clock, color: "text-muted-foreground", bgColor: "bg-muted" },
+  applied: { label: "Applied", icon: CheckCircle2, color: "text-green-500", bgColor: "bg-green-500/10" },
+  failed: { label: "Failed", icon: XCircle, color: "text-red-500", bgColor: "bg-red-500/10" },
+  rolled_back: { label: "Rolled Back", icon: RotateCcw, color: "text-yellow-500", bgColor: "bg-yellow-500/10" },
+  running: { label: "Running", icon: Play, color: "text-blue-500", bgColor: "bg-blue-500/10" },
+}
+
+function formatDate(date: Date): string {
+  return date.toLocaleDateString("fr-FR", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  })
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`
+  return `${Math.floor(ms / 60000)}m ${Math.floor((ms % 60000) / 1000)}s`
+}
+
+function MigrationRow({
+  migration,
+  isCurrentVersion,
+  onApply,
+  onRollback,
+  onViewDetails,
+  showScripts,
+}: {
+  migration: Migration
+  isCurrentVersion: boolean
+  onApply?: (migration: Migration) => void
+  onRollback?: (migration: Migration) => void
+  onViewDetails?: (migration: Migration) => void
+  showScripts?: boolean
+}) {
+  const [expanded, setExpanded] = React.useState(false)
+  const statusConf = statusConfig[migration.status]
+  const StatusIcon = statusConf.icon
+
+  const canApply = migration.status === "pending" || migration.status === "rolled_back"
+  const canRollback = migration.status === "applied"
+
+  return (
+    <div className={cn(
+      "border-b last:border-b-0",
+      isCurrentVersion && "bg-primary/5 border-primary/30",
+      migration.status === "failed" && "bg-red-500/5"
+    )}>
+      <div className="flex items-center gap-3 p-3">
+        {/* Expand button */}
+        {showScripts && (migration.upScript || migration.downScript) && (
+          <button
+            className="text-muted-foreground hover:text-foreground transition-colors"
+            onClick={() => setExpanded(!expanded)}
+          >
+            {expanded ? (
+              <ChevronDown className="h-4 w-4" />
+            ) : (
+              <ChevronRight className="h-4 w-4" />
+            )}
+          </button>
+        )}
+
+        {/* Status icon */}
+        <div className={cn("p-1.5 rounded", statusConf.bgColor)}>
+          <StatusIcon className={cn("h-4 w-4", statusConf.color)} />
+        </div>
+
+        {/* Version and name */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <code className="font-semibold text-sm">{migration.version}</code>
+            {isCurrentVersion && (
+              <Badge className="bg-primary text-xs">Current</Badge>
+            )}
+            <span className="font-medium truncate">{migration.name}</span>
+          </div>
+          {migration.description && (
+            <p className="text-sm text-muted-foreground truncate mt-0.5">
+              {migration.description}
+            </p>
+          )}
+        </div>
+
+        {/* Metadata */}
+        <div className="flex items-center gap-4 text-xs text-muted-foreground shrink-0">
+          {migration.author && (
+            <span className="flex items-center gap-1">
+              <User className="h-3 w-3" />
+              {migration.author}
+            </span>
+          )}
+          {migration.appliedAt && (
+            <span className="flex items-center gap-1">
+              <Calendar className="h-3 w-3" />
+              {formatDate(migration.appliedAt)}
+            </span>
+          )}
+          {migration.duration !== undefined && (
+            <span className="flex items-center gap-1">
+              <Timer className="h-3 w-3" />
+              {formatDuration(migration.duration)}
+            </span>
+          )}
+        </div>
+
+        {/* Status badge */}
+        <Badge variant="outline" className={cn("shrink-0", statusConf.color)}>
+          {statusConf.label}
+        </Badge>
+
+        {/* Actions */}
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" size="sm" className="h-8 w-8 p-0">
+              <MoreVertical className="h-4 w-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            {onViewDetails && (
+              <DropdownMenuItem onClick={() => onViewDetails(migration)}>
+                <FileCode className="h-4 w-4 mr-2" />
+                View Details
+              </DropdownMenuItem>
+            )}
+            {onApply && canApply && (
+              <DropdownMenuItem onClick={() => onApply(migration)}>
+                <ArrowUp className="h-4 w-4 mr-2" />
+                Apply Migration
+              </DropdownMenuItem>
+            )}
+            {onRollback && canRollback && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem
+                  onClick={() => onRollback(migration)}
+                  className="text-destructive"
+                >
+                  <ArrowDown className="h-4 w-4 mr-2" />
+                  Rollback
+                </DropdownMenuItem>
+              </>
+            )}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      {/* Error message */}
+      {migration.status === "failed" && migration.error && (
+        <div className="px-3 pb-3">
+          <div className="flex items-start gap-2 p-2 bg-red-500/10 rounded text-sm text-red-500">
+            <AlertTriangle className="h-4 w-4 shrink-0 mt-0.5" />
+            <pre className="whitespace-pre-wrap font-mono text-xs">{migration.error}</pre>
+          </div>
+        </div>
+      )}
+
+      {/* Scripts */}
+      {showScripts && expanded && (
+        <div className="px-3 pb-3 space-y-3">
+          {migration.upScript && (
+            <div>
+              <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
+                <ArrowUp className="h-3 w-3" />
+                Up Migration
+              </div>
+              <pre className="p-2 bg-muted rounded text-xs font-mono overflow-x-auto">
+                {migration.upScript}
+              </pre>
+            </div>
+          )}
+          {migration.downScript && (
+            <div>
+              <div className="flex items-center gap-2 text-xs text-muted-foreground mb-1">
+                <ArrowDown className="h-3 w-3" />
+                Down Migration (Rollback)
+              </div>
+              <pre className="p-2 bg-muted rounded text-xs font-mono overflow-x-auto">
+                {migration.downScript}
+              </pre>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function WakaMigrationList({
+  migrations,
+  onApply,
+  onRollback,
+  onViewDetails,
+  currentVersion,
+  showScripts = false,
+  title = "Migrations",
+  className,
+}: WakaMigrationListProps) {
+  const [filter, setFilter] = React.useState<MigrationStatus | "all">("all")
+
+  // Calculate stats
+  const stats = React.useMemo(() => {
+    return {
+      total: migrations.length,
+      pending: migrations.filter((m) => m.status === "pending").length,
+      applied: migrations.filter((m) => m.status === "applied").length,
+      failed: migrations.filter((m) => m.status === "failed").length,
+    }
+  }, [migrations])
+
+  // Filter migrations
+  const filteredMigrations = React.useMemo(() => {
+    if (filter === "all") return migrations
+    return migrations.filter((m) => m.status === filter)
+  }, [migrations, filter])
+
+  // Sort by version (newest first)
+  const sortedMigrations = React.useMemo(() => {
+    return [...filteredMigrations].sort((a, b) => b.version.localeCompare(a.version))
+  }, [filteredMigrations])
+
+  return (
+    <div className={cn("flex flex-col border rounded-lg bg-background", className)}>
+      {/* Header */}
+      <div className="flex items-center justify-between gap-4 p-3 border-b">
+        <div className="flex items-center gap-3">
+          <Database className="h-5 w-5" />
+          <h3 className="font-semibold">{title}</h3>
+          <Badge variant="secondary">{stats.total}</Badge>
+          {currentVersion && (
+            <Badge variant="outline" className="text-xs">
+              v{currentVersion}
+            </Badge>
+          )}
+        </div>
+
+        <div className="flex items-center gap-2">
+          {stats.pending > 0 && (
+            <Badge variant="outline">{stats.pending} pending</Badge>
+          )}
+          {stats.failed > 0 && (
+            <Badge className="bg-red-500">{stats.failed} failed</Badge>
+          )}
+        </div>
+      </div>
+
+      {/* Filter toolbar */}
+      <div className="flex items-center gap-2 p-2 border-b bg-muted/30">
+        <span className="text-xs text-muted-foreground">Filter:</span>
+        {(["all", "pending", "applied", "failed", "rolled_back"] as const).map((status) => (
+          <Button
+            key={status}
+            variant={filter === status ? "default" : "ghost"}
+            size="sm"
+            className="h-7 text-xs"
+            onClick={() => setFilter(status)}
+          >
+            {status === "all" ? "All" : statusConfig[status].label}
+          </Button>
+        ))}
+      </div>
+
+      {/* Migration list */}
+      <ScrollArea className="flex-1 max-h-[500px]">
+        {sortedMigrations.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-32 text-muted-foreground">
+            <Database className="h-8 w-8 mb-2" />
+            <span>No migrations found</span>
+          </div>
+        ) : (
+          sortedMigrations.map((migration) => (
+            <MigrationRow
+              key={migration.id}
+              migration={migration}
+              isCurrentVersion={migration.version === currentVersion}
+              onApply={onApply}
+              onRollback={onRollback}
+              onViewDetails={onViewDetails}
+              showScripts={showScripts}
+            />
+          ))
+        )}
+      </ScrollArea>
+
+      {/* Footer */}
+      {stats.pending > 0 && onApply && (
+        <div className="p-3 border-t bg-muted/30">
+          <Button
+            size="sm"
+            onClick={() => {
+              const pending = migrations.filter((m) => m.status === "pending")
+              pending.forEach((m) => onApply(m))
+            }}
+          >
+            <ArrowUp className="h-4 w-4 mr-1" />
+            Apply All Pending ({stats.pending})
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+// Default sample migrations for demo
+export const defaultMigrations: Migration[] = [
+  {
+    id: "1",
+    version: "20240115_001",
+    name: "create_users_table",
+    description: "Create users table with basic fields",
+    status: "applied",
+    appliedAt: new Date(Date.now() - 30 * 24 * 3600000),
+    duration: 125,
+    author: "john.doe",
+    upScript: `CREATE TABLE users (
+  id SERIAL PRIMARY KEY,
+  email VARCHAR(255) UNIQUE NOT NULL,
+  name VARCHAR(255),
+  created_at TIMESTAMP DEFAULT NOW()
+);`,
+    downScript: "DROP TABLE users;",
+  },
+  {
+    id: "2",
+    version: "20240120_001",
+    name: "add_users_password",
+    description: "Add password hash column to users",
+    status: "applied",
+    appliedAt: new Date(Date.now() - 25 * 24 * 3600000),
+    duration: 45,
+    author: "jane.smith",
+    upScript: "ALTER TABLE users ADD COLUMN password_hash VARCHAR(255);",
+    downScript: "ALTER TABLE users DROP COLUMN password_hash;",
+  },
+  {
+    id: "3",
+    version: "20240125_001",
+    name: "create_posts_table",
+    description: "Create posts table with foreign key to users",
+    status: "applied",
+    appliedAt: new Date(Date.now() - 20 * 24 * 3600000),
+    duration: 230,
+    author: "john.doe",
+    upScript: `CREATE TABLE posts (
+  id SERIAL PRIMARY KEY,
+  user_id INTEGER REFERENCES users(id),
+  title VARCHAR(255) NOT NULL,
+  content TEXT,
+  created_at TIMESTAMP DEFAULT NOW()
+);
+CREATE INDEX idx_posts_user_id ON posts(user_id);`,
+    downScript: `DROP INDEX idx_posts_user_id;
+DROP TABLE posts;`,
+  },
+  {
+    id: "4",
+    version: "20240130_001",
+    name: "add_posts_status",
+    description: "Add status enum to posts",
+    status: "failed",
+    author: "jane.smith",
+    error: "ERROR: type \"post_status\" already exists\n  at migration.up (migrations/20240130_001.ts:5:3)",
+    upScript: `CREATE TYPE post_status AS ENUM ('draft', 'published', 'archived');
+ALTER TABLE posts ADD COLUMN status post_status DEFAULT 'draft';`,
+    downScript: `ALTER TABLE posts DROP COLUMN status;
+DROP TYPE post_status;`,
+  },
+  {
+    id: "5",
+    version: "20240205_001",
+    name: "create_comments_table",
+    description: "Create comments table",
+    status: "pending",
+    author: "john.doe",
+    upScript: `CREATE TABLE comments (
+  id SERIAL PRIMARY KEY,
+  post_id INTEGER REFERENCES posts(id),
+  user_id INTEGER REFERENCES users(id),
+  content TEXT NOT NULL,
+  created_at TIMESTAMP DEFAULT NOW()
+);`,
+    downScript: "DROP TABLE comments;",
+  },
+  {
+    id: "6",
+    version: "20240210_001",
+    name: "add_full_text_search",
+    description: "Add full-text search to posts",
+    status: "pending",
+    author: "jane.smith",
+    upScript: `ALTER TABLE posts ADD COLUMN search_vector tsvector;
+CREATE INDEX idx_posts_search ON posts USING GIN(search_vector);
+CREATE FUNCTION update_posts_search() RETURNS trigger AS $$
+BEGIN
+  NEW.search_vector := to_tsvector('english', coalesce(NEW.title, '') || ' ' || coalesce(NEW.content, ''));
+  RETURN NEW;
+END;
+$$ LANGUAGE plpgsql;
+CREATE TRIGGER posts_search_update BEFORE INSERT OR UPDATE ON posts
+  FOR EACH ROW EXECUTE FUNCTION update_posts_search();`,
+    downScript: `DROP TRIGGER posts_search_update ON posts;
+DROP FUNCTION update_posts_search;
+DROP INDEX idx_posts_search;
+ALTER TABLE posts DROP COLUMN search_vector;`,
+  },
+]