@orsetra/shared-ui 1.0.0 → 1.0.1

package/components/ui/certificate-editor.tsx

@@ -0,0 +1,445 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { Button } from "./button"
+import { Input } from "./input"
+import { Label } from "./label"
+import { Textarea } from "./textarea"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./tabs"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select"
+import { Key, Eye, EyeOff, Copy, FileText, RefreshCw, Info } from "lucide-react"
+import { useToast } from "../../hooks/use-toast"
+import { getCertificateData, createCertificate, updateCertificate, getCertificate } from "@/app/secrets/service"
+import type { CreateSecretRequest, UpdateSecretRequest } from "@/app/secrets/models"
+import { FileImport } from "./file-import"
+
+interface CertificateEditorProps {
+  secretPath?: string
+  initialContent?: string
+  description?: string
+  onContentChange?: (content: string) => void
+  onDescriptionChange?: (description: string) => void
+  onUpdate?: () => void
+  showUpdateButton?: boolean
+  className?: string
+  readOnly?: boolean
+}
+
+export function CertificateEditor({
+  secretPath,
+  initialContent = "",
+  description = "",
+  onContentChange,
+  onDescriptionChange,
+  onUpdate,
+  showUpdateButton = true,
+  className = "",
+  readOnly = false
+}: CertificateEditorProps) {
+  const { toast } = useToast()
+  const [versions, setVersions] = useState<any>({})
+  const [metadata, setMetadata] = useState<any>({})
+  const [loading, setLoading] = useState(false)
+  const [showContent, setShowContent] = useState(false)
+  const [activeTab, setActiveTab] = useState<"content" | "metadata">("content")
+  const [secretExists, setSecretExists] = useState(false)
+  const [expirationDate, setExpirationDate] = useState<Date | null>(null)
+  const [selectedVersion, setSelectedVersion] = useState<string>("")
+  const [hasChanges, setHasChanges] = useState(false)
+  const [originalContent, setOriginalContent] = useState<string>("")
+  const [originalDescription, setOriginalDescription] = useState("")
+  const [createForm, setCreateForm] = useState<{description: string, content: string, fileType: string}>({
+    description: description,
+    content: initialContent,
+    fileType: ""
+  })
+  // Load secret data when secretPath changes
+  useEffect(() => {
+    if (secretPath) {
+      loadSecretData()
+      loadVersions()
+    }
+  }, [secretPath])
+
+  // Sync with external content changes
+  useEffect(() => {
+    if (initialContent) {
+      setCreateForm(prev => ({ ...prev, content: initialContent }))
+    }
+  }, [initialContent])
+
+  // Check for changes when content or description changes
+  useEffect(() => {
+    checkForChanges()
+  }, [createForm.content, createForm.description, originalContent, originalDescription])
+
+  const loadVersions = async () => {
+    if (!secretPath) return
+    const secret = await getCertificate(secretPath)
+    setVersions(secret?.metadata.versions || {})
+    // Set selected version if not already set and we have versions
+    if (!selectedVersion && secret?.metadata?.versions) {
+      const versions = Object.keys(secret.metadata.versions)
+      if (versions.length > 0) {
+        const latestVersion = Math.max(...versions.map(Number)).toString()
+        setSelectedVersion(latestVersion)
+       }
+   }
+  }
+
+  const loadSecretData = async (version?: string) => {
+    if (!secretPath) return
+
+    setLoading(true)
+    try {
+      // For Vault KV v2, we can specify version in the path or as a parameter
+      const versionedPath = version ? `${secretPath}?version=${version}` : secretPath
+      const secretData = await getCertificateData(versionedPath)
+      if (secretData) {
+        const contentStr = secretData.data?.content || ""
+        const descriptionStr = secretData.metadata?.description || ""
+        const certificateTypeStr = secretData.metadata?.certificate_type || "pem"
+        setCreateForm(prev => ({ ...prev, content: contentStr, description: descriptionStr, fileType: certificateTypeStr }))
+        setMetadata(secretData.metadata || {})
+        setSecretExists(true)
+        
+        // Store original values for change detection
+        setOriginalContent(contentStr)
+        setOriginalDescription(descriptionStr)
+        setHasChanges(false)
+      } else {
+        setCreateForm(prev => ({ ...prev, content: "", description: "", fileType: "" }))
+        setMetadata({})
+        setSecretExists(false)
+        setOriginalContent("")
+        setOriginalDescription("")
+        setHasChanges(false)
+      }
+    } catch (error) {
+      console.error("Error loading certificate:", error)
+      toast({
+        variant: "destructive",
+        title: "Error loading certificate",
+        description: "Failed to load certificate data."
+      })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const checkForChanges = () => {
+    const contentChanged = createForm.content !== originalContent
+    const descriptionChanged = createForm.description !== originalDescription
+    setHasChanges(contentChanged || descriptionChanged)
+  }
+
+  const refreshCertificate = async () => {
+    if (secretPath) {
+      await loadSecretData(selectedVersion)
+      await loadVersions()
+      toast({
+        variant: "success",
+        title: "Certificate refreshed",
+        description: "Certificate data has been reloaded."
+      })
+    }
+  }
+
+  const handleVersionChange = async (version: string) => {
+    setSelectedVersion(version)
+    await loadSecretData(version)
+    toast({
+      variant: "success",
+      title: "Version loaded",
+      description: `Loaded version ${version} of the certificate.`
+    })
+  }
+
+  const getAvailableVersions = () => {
+    if (!versions) return []
+    return Object.entries(versions)
+      .filter(([_, versionData]: [string, any]) => !versionData.destroyed && !versionData.deletion_time)
+      .map(([versionNum, versionData]: [string, any]) => ({
+        value: versionNum,
+        label: `${secretPath}:${versionNum}`,
+        createdTime: versionData.created_time
+      }))
+      .sort((a, b) => parseInt(b.value) - parseInt(a.value)) // Sort by version number descending
+  }
+
+  const toggleContentVisibility = () => {
+    setShowContent(!showContent)
+  }
+
+  const copyToClipboard = (value: string) => {
+    navigator.clipboard.writeText(value)
+    toast({
+      variant: "success",
+      title: "Copied to clipboard",
+      description: "Certificate content has been copied."
+    })
+  }
+
+  const handleUpdate = async () => {
+    if (!secretPath) {
+      onUpdate?.()
+      return
+    }
+
+    try {
+      const request: CreateSecretRequest | UpdateSecretRequest = {
+          data: createForm,
+          metadata: {
+            description: createForm.description || undefined
+          }     
+      }
+
+      if (secretExists) {
+        await updateCertificate(secretPath, request as UpdateSecretRequest)
+        toast({
+          variant: "success",
+          title: "Certificate updated",
+          description: `Certificate "${secretPath}" has been updated successfully.`
+        })
+      } else {
+        await createCertificate(secretPath, request as CreateSecretRequest)
+        setSecretExists(true)
+        toast({
+          variant: "success",
+          title: "Certificate created",
+          description: `Certificate "${secretPath}" has been created successfully.`
+        })
+      }
+      
+      // Reset change tracking after successful update
+      setOriginalContent(createForm.content)
+      setOriginalDescription(createForm.description)
+      setHasChanges(false)
+      
+      onUpdate?.()
+    } catch (error) {
+      console.error("Error updating certificate:", error)
+      toast({
+        variant: "destructive",
+        title: "Error updating certificate",
+        description: "Failed to save certificate data."
+      })
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className={`space-y-6 ${className}`}>
+        <div className="animate-pulse">
+          <div className="h-4 bg-ibm-gray-20 mb-4"></div>
+          <div className="h-32 bg-ibm-gray-20"></div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className={`space-y-6 ${className}`}>
+      {/* Certificate Section */}
+      <div>
+        <div className="flex items-center justify-between mb-4">
+          <Label className="text-sm font-medium text-ibm-gray-100">Secret file</Label>
+          {secretPath && (
+            <div className="flex items-center gap-3">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={refreshCertificate}
+                style={{borderRadius: 0}}
+                leftIcon={<RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />}
+                disabled={loading}
+              >
+                Refresh
+              </Button>
+              
+              {/* Version Selector */}
+              {getAvailableVersions().length > 0 && (
+                <Select value={selectedVersion} onValueChange={handleVersionChange}>
+                  <SelectTrigger className="w-64 h-12" style={{borderRadius: 0}}>
+                    <SelectValue placeholder="Select a version" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {getAvailableVersions().map((version) => (
+                      <SelectItem key={version.value} value={version.value}>
+                        <div className="flex flex-col">
+                          <span className="font-medium">{version.label}</span>
+                          <span className="text-xs text-ibm-gray-70">
+                            {new Date(version.createdTime).toLocaleString()}
+                          </span>
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+            </div>
+          )}
+        </div>
+
+        <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as "content" | "metadata")} className="w-full">
+          <div className="border-b border-ibm-gray-20">
+            <TabsList className="h-auto bg-transparent border-0 p-0 justify-start gap-0">
+              <TabsTrigger 
+                value="content" 
+                className="flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors border-b-2 border-transparent data-[state=active]:border-ibm-blue-60 data-[state=active]:text-ibm-blue-60 text-ibm-gray-70 hover:text-ibm-blue-60 bg-transparent rounded-none"
+              >
+                <FileText className="w-4 h-4" />
+                Content
+              </TabsTrigger>
+              <TabsTrigger 
+                value="metadata" 
+                className="flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors border-b-2 border-transparent data-[state=active]:border-ibm-blue-60 data-[state=active]:text-ibm-blue-60 text-ibm-gray-70 hover:text-ibm-blue-60 bg-transparent rounded-none"
+              >
+                <Info className="w-4 h-4" />
+                Metadata
+              </TabsTrigger>
+            </TabsList>
+          </div>
+
+          <TabsContent value="content" className="mt-4">
+            <div className="space-y-4">
+              <div>
+                <div className="flex items-center justify-between mb-2">
+                  <div className="flex items-center gap-2">
+                  <Label className="text-sm font-medium text-ibm-gray-100">Expiration date:</Label>
+                  <Input
+                    type= "date"
+                    value={expirationDate ? expirationDate.toISOString().split('T')[0] : ""}
+                    onChange={(e) => setExpirationDate(e.target.value ? new Date(e.target.value) : null)}
+                    className="w-30 h-6 border-none text-sm"
+                  />
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <Button
+                      variant="ghost"
+                      size="xs"
+                      onClick={toggleContentVisibility}
+                      leftIcon={showContent ? <EyeOff className="w-3 h-3" /> : <Eye className="w-3 h-3" />}
+                      className="h-6 px-2"
+                    >
+                      {showContent ? "Hide" : "Show"}
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="xs"
+                      onClick={() => copyToClipboard(createForm.content)}
+                      leftIcon={<Copy className="w-3 h-3" />}
+                      className="h-6 px-2"
+                    >
+                      Copy
+                    </Button>
+                  </div>
+                </div>
+                <Textarea
+                  value={createForm.content}
+                  onChange={(e) => {
+
+                    setCreateForm(prev => ({ ...prev, content: e.target.value }))
+                    onContentChange?.(e.target.value)
+                  }}
+                  placeholder="-----BEGIN CERTIFICATE-----&#10;Certificate content here...&#10;-----END CERTIFICATE-----"
+                  className="mt-2 min-h-[200px] max-h-64 font-mono text-sm resize-y"
+                  readOnly={readOnly}
+                  style={{
+                    fontFamily: 'monospace',
+                    fontSize: '12px',
+                    lineHeight: '1.4'
+                  }}
+                />
+              <div className="mt-2 flex items-center gap-2">
+                <FileImport
+                  onFileContent={(content, fileName, fileType) => {
+                    setCreateForm(prev => ({ ...prev, content: content, fileType: fileType}))
+                  }}
+                  acceptedTypes={["text/plain", "application/x-pem-file", "application/x-x509-ca-cert"]}
+                  buttonText="Import content"
+                  buttonVariant="ghost"
+                  buttonSize="sm"
+                />
+                <p className="text-xs text-ibm-gray-70">
+                  Paste your secret file content in text format. This can be a certificate, private key, or certificate chain.
+                </p>
+              </div>
+              </div>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="metadata" className="mt-4">
+            <div className="space-y-4">
+              <div>
+                <Label className="text-sm font-medium text-ibm-gray-100">Certificate Metadata</Label>
+                <div className="mt-2 p-4 bg-ibm-gray-10 border border-ibm-gray-20 rounded">
+                  {Object.keys(metadata).length > 0 ? (
+                    <div className="space-y-3">
+                      {Object.entries(metadata).map(([key, value]) => (
+                        <div key={key} className="flex items-start gap-3">
+                          <span className="text-sm font-medium text-ibm-gray-100 min-w-[120px] capitalize">
+                            {key.replace(/_/g, ' ')}:
+                          </span>
+                          <span className="text-sm text-ibm-gray-70 break-all">
+                            {typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value || 'N/A')}
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  ) : (
+                    <div className="text-center py-6">
+                      <Info className="w-8 h-8 text-ibm-gray-30 mx-auto mb-2" />
+                      <p className="text-sm text-ibm-gray-70">
+                        No metadata available for this certificate
+                      </p>
+                    </div>
+                  )}
+                </div>
+                <p className="text-xs text-ibm-gray-70 mt-1">
+                  This information is automatically generated by the certificate management system.
+                </p>
+              </div>
+
+              {/* Description Field */}
+              <div>
+                {readOnly ? (
+                  <div className="p-3 bg-ibm-gray-10 border border-ibm-gray-20 rounded">
+                    <p className="text-sm text-ibm-gray-70">
+                      {createForm.description || "No description provided"}
+                    </p>
+                  </div>
+                ) : (
+                  <Input
+                    value={createForm.description}
+                    onChange={(e) => {
+                      setCreateForm(prev => ({ ...prev, description: e.target.value }))
+                      onDescriptionChange?.(e.target.value)
+                    }}
+                    placeholder="Enter certificate description..."
+                    className="text-sm border-ibm-gray-20"
+                  />
+                )}
+              </div>
+            </div>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* Update Button */}
+      {showUpdateButton && !readOnly && (
+        <div className="flex justify-end pt-4 border-b-0">
+          <Button
+            variant="primary"
+            style={{borderRadius: 0}}
+            size="sm"
+            onClick={handleUpdate}
+            disabled={!hasChanges || !createForm.content.trim()}
+          >
+            Update Certificate
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}