@orsetra/shared-ui 1.0.0 → 1.0.2

package/components/ui/secret-properties-editor.tsx

@@ -0,0 +1,642 @@
+"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, Plus, Eye, EyeOff, Copy, Trash2, FileText, Code, RefreshCw, Info } from "lucide-react"
+import { useToast } from "../../hooks/use-toast"
+import { getSecretData, createSecret, updateSecret , getSecret} from "@/app/secrets/service"
+import type { CreateSecretRequest, UpdateSecretRequest } from "@/app/secrets/models"
+import { convertDataToText, convertTextToData, FileType } from "../../lib/secret-utils"
+import { FileImport } from "./file-import"
+
+interface SecretPropertiesEditorProps {
+  secretPath?: string
+  initialData?: Record<string, string>
+  description?: string
+  onDataChange?: (data: Record<string, string>) => void
+  onDescriptionChange?: (description: string) => void
+  onUpdate?: () => void
+  showUpdateButton?: boolean
+  className?: string
+  readOnly?: boolean
+}
+
+export function SecretPropertiesEditor({
+  secretPath,
+  initialData = {},
+  description = "",
+  onDataChange,
+  onDescriptionChange,
+  onUpdate,
+  showUpdateButton = true,
+  className = "",
+  readOnly = false
+}: SecretPropertiesEditorProps) {
+  const { toast } = useToast()
+  const [fileType, setFileType] = useState<FileType>("application/json")
+  const [data, setData] = useState<Record<string, string>>(initialData)
+  const [textData, setTextData] = useState("")
+  const [versions, setVersions] = useState<any>({})
+  const [currentDescription, setCurrentDescription] = useState(description)
+  const [metadata, setMetadata] = useState<any>({})
+  const [loading, setLoading] = useState(false)
+  const [showSecretValues, setShowSecretValues] = useState<Record<string, boolean>>({})
+  const [newKeyValue, setNewKeyValue] = useState({ key: "", value: "" })
+  const [activeTab, setActiveTab] = useState<"view" | "text">("view")
+  const [secretExists, setSecretExists] = useState(false)
+  const [selectedVersion, setSelectedVersion] = useState<string>("")
+  const [hasChanges, setHasChanges] = useState(false)
+  const [originalData, setOriginalData] = useState<Record<string, string>>({})
+  const [originalDescription, setOriginalDescription] = useState("")
+
+  // Load secret data when secretPath changes
+  useEffect(() => {
+    if (secretPath) {
+      loadSecretData()
+      loadVersions()
+    }
+  }, [secretPath])
+
+  // Convert data to text format when switching to text tab
+  useEffect(() => {
+    if (activeTab === "text") {
+      try {
+        const jsonText = convertDataToText(data, fileType)
+        setTextData(jsonText)
+      } catch (error) {
+        console.error("Error converting data to text:", error)
+        setTextData("{}")
+      }
+    }
+  }, [activeTab, data])
+
+  // Sync with external data changes
+  useEffect(() => {
+    if (initialData && Object.keys(initialData).length > 0) {
+      setData(initialData)
+    }
+  }, [initialData])
+
+  // Check for changes when data or description changes
+  useEffect(() => {
+    checkForChanges()
+  }, [data, currentDescription, originalData, originalDescription])
+
+  const loadVersions = async () => {
+    if (!secretPath) return
+    const secret = await getSecret(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 getSecretData(versionedPath)
+      if (secretData) {
+        const dataObj = secretData.data || {}
+        const descriptionStr = secretData.metadata?.description || ""
+        
+        setData(dataObj)
+        setCurrentDescription(descriptionStr)
+        setMetadata(secretData.metadata || {})
+        setSecretExists(true)
+        
+        // Store original values for change detection
+        setOriginalData(dataObj)
+        setOriginalDescription(descriptionStr)
+        setHasChanges(false)
+      } else {
+        setData({})
+        setCurrentDescription("")
+        setMetadata({})
+        setSecretExists(false)
+        setOriginalData({})
+        setOriginalDescription("")
+        setHasChanges(false)
+      }
+    } catch (error) {
+      console.error("Error loading secret:", error)
+      toast({
+        variant: "destructive",
+        title: "Error loading secret",
+        description: "Failed to load secret data."
+      })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const checkForChanges = () => {
+    const dataChanged = JSON.stringify(data) !== JSON.stringify(originalData)
+    const descriptionChanged = currentDescription !== originalDescription
+    setHasChanges(dataChanged || descriptionChanged)
+  }
+
+  const refreshSecret = async () => {
+    if (secretPath) {
+      await loadSecretData(selectedVersion)
+      await loadVersions()
+      toast({
+        variant: "success",
+        title: "Secret refreshed",
+        description: "Secret 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 secret.`
+    })
+  }
+
+  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 handleTabChange = (value: string) => {
+    if (value === "text" && activeTab === "view") {
+      try {
+        const jsonText = convertDataToText(data, fileType)
+        setTextData(jsonText)
+      } catch (error) {
+        console.error("Error converting data to text:", error)
+        setTextData("{}")
+      }
+    } else if (value === "view" && activeTab === "text") {
+      try {
+        const stringData = convertTextToData(textData, fileType)
+        setData(stringData)
+        onDataChange?.(stringData)
+      } catch (error: any) {
+        toast({
+          variant: "destructive",
+          title: "Invalid JSON",
+          description: error.message || "Please enter valid JSON format."
+        })
+      }
+    }
+    setActiveTab(value as "view" | "text")
+  }
+
+  const toggleSecretVisibility = (key: string) => {
+    setShowSecretValues(prev => ({
+      ...prev,
+      [key]: !prev[key]
+    }))
+  }
+
+  const copyToClipboard = (value: string) => {
+    navigator.clipboard.writeText(value)
+    toast({
+      variant: "success",
+      title: "Copied to clipboard",
+      description: "Secret value has been copied."
+    })
+  }
+
+  const addKeyValue = () => {
+    if (!newKeyValue.key || !newKeyValue.value) return
+
+    const newData = {
+      ...data,
+      [newKeyValue.key]: newKeyValue.value
+    }
+    setData(newData)
+    onDataChange?.(newData)
+    setNewKeyValue({ key: "", value: "" })
+  }
+
+  const removeKeyValue = (key: string) => {
+    const newData = { ...data }
+    delete newData[key]
+    setData(newData)
+    onDataChange?.(newData)
+  }
+
+  const updateKeyValue = (oldKey: string, newKey: string, value: string) => {
+    const newData = { ...data }
+    if (oldKey !== newKey) {
+      delete newData[oldKey]
+    }
+    newData[newKey] = value
+    setData(newData)
+    onDataChange?.(newData)
+  }
+
+  const handleUpdate = async () => {
+    if (!secretPath) {
+      onUpdate?.()
+      return
+    }
+
+    try {
+      const request: CreateSecretRequest | UpdateSecretRequest = {
+          data: data,
+          metadata: {
+            description: currentDescription || undefined
+          }     
+      }
+
+      if (secretExists) {
+        await updateSecret(secretPath, request as UpdateSecretRequest)
+        toast({
+          variant: "success",
+          title: "Secret updated",
+          description: `Secret "${secretPath}" has been updated successfully.`
+        })
+      } else {
+        await createSecret(secretPath, request as CreateSecretRequest)
+        setSecretExists(true)
+        toast({
+          variant: "success",
+          title: "Secret created",
+          description: `Secret "${secretPath}" has been created successfully.`
+        })
+      }
+      
+      // Reset change tracking after successful update
+      setOriginalData(data)
+      setOriginalDescription(currentDescription)
+      setHasChanges(false)
+      
+      onUpdate?.()
+    } catch (error) {
+      console.error("Error updating secret:", error)
+      toast({
+        variant: "destructive",
+        title: "Error updating secret",
+        description: "Failed to save secret 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}`}>
+      {/* Properties Section */}
+      <div>
+        <div className="flex items-center justify-between mb-4">
+          <Label className="text-sm font-medium text-ibm-gray-100">Properties</Label>
+          {secretPath && (
+            <div className="flex items-center gap-3">
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={refreshSecret}
+                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">
+                    <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={handleTabChange} 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="view" 
+                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" />
+                View Mode
+              </TabsTrigger>
+              <TabsTrigger 
+                value="text" 
+                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"
+              >
+                <Code className="w-4 h-4" />
+                Text Mode
+              </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="view" className="mt-4">
+          <div className="space-y-4">
+          <div>
+
+            <Label className="text-sm font-medium text-ibm-gray-100 ml-3 mt-3">Table View</Label>
+            <div className="space-y-1 max-h-96 overflow-y-auto border-none">           
+
+              {/* Existing Properties */}
+              {Object.entries(data || {}).map(([key, value]) => (
+                <div key={key} className="grid grid-cols-6 gap-2 px-3 py-2 hover:bg-ibm-gray-10 transition-colors">
+                  {/* Key - with actions */}
+                  <div className="col-span-2">
+                    <div className="relative">
+                      <Input
+                        value={key}
+                        readOnly
+                        className="text-sm pr-16 border-ibm-gray-20 h-8 bg-ibm-gray-10 font-medium"
+                      />
+                      <div className="absolute right-1 top-1/2 transform -translate-y-1/2 flex items-center gap-1">
+                        <Button
+                          variant="ghost"
+                          size="xs"
+                          onClick={() => copyToClipboard(key)}
+                          className="h-6 w-6 p-0"
+                        >
+                          <Copy className="w-3 h-3" />
+                        </Button>
+                        {!readOnly && (
+                          <Button
+                            variant="ghost"
+                            size="xs"
+                            onClick={() => removeKeyValue(key)}
+                            className="text-ibm-red-60 hover:text-ibm-red-70 hover:bg-ibm-red-10 h-6 w-6 p-0"
+                          >
+                            <Trash2 className="w-3 h-3" />
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Value */}
+                  <div className="col-span-4">
+                    <div className="relative">
+                      <Input
+                        type={showSecretValues[key] ? "text" : "password"}
+                        value={value}
+                        onChange={(e) => updateKeyValue(key, key, e.target.value)}
+                        placeholder="Enter value..."
+                        className="text-sm pr-16 border-ibm-gray-20 h-8"
+                        readOnly={readOnly}
+                      />
+                      <div className="absolute right-1 top-1/2 transform -translate-y-1/2 flex items-center gap-1">
+                        <Button
+                          variant="ghost"
+                          size="xs"
+                          onClick={() => toggleSecretVisibility(key)}
+                          leftIcon={showSecretValues[key] ? <EyeOff className="w-3 h-3" /> : <Eye className="w-3 h-3" />}
+                          className="h-6 w-6 p-0"
+                        >
+                        </Button>
+                        <Button
+                          variant="ghost"
+                          size="xs"
+                          leftIcon={<Copy className="w-3 h-3" />}
+                          onClick={() => copyToClipboard(value)}
+                          className="h-6 w-6 p-0"
+                        >
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+
+              {/* Add new property row */}
+              {!readOnly && (
+                <div className="grid grid-cols-6 gap-2 px-3 py-2 hover:bg-ibm-gray-10 transition-colors border-t border-dashed border-ibm-gray-20 bg-white sticky bottom-0">
+                  {/* New Key */}
+                  <div className="col-span-2">
+                    <Input
+                      value={newKeyValue.key}
+                      onChange={(e) => setNewKeyValue(prev => ({ ...prev, key: e.target.value }))}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' && newKeyValue.key && newKeyValue.value) {
+                          e.preventDefault()
+                          addKeyValue()
+                        }
+                      }}
+                      placeholder="Property key..."
+                      className="text-sm border-ibm-gray-20 h-8"
+                    />
+                  </div>
+
+                  {/* New Value with Add Button */}
+                  <div className="col-span-4">
+                    <div className="relative">
+                      <Input
+                        type="password"
+                        value={newKeyValue.value}
+                        onChange={(e) => setNewKeyValue(prev => ({ ...prev, value: e.target.value }))}
+                        onKeyDown={(e) => {
+                          if (e.key === 'Enter' && newKeyValue.key && newKeyValue.value) {
+                            e.preventDefault()
+                            addKeyValue()
+                          }
+                        }}
+                        placeholder="Property value..."
+                        className="text-sm border-ibm-gray-20 h-8 pr-10"
+                      />
+                      <div className="absolute right-1 top-1/2 transform -translate-y-1/2">
+                        <Button
+                          variant="ghost"
+                          size="xs"
+                          onClick={addKeyValue}
+                          disabled={!newKeyValue.key || !newKeyValue.value}
+                          className="text-ibm-green-60 hover:text-ibm-green-70 hover:bg-ibm-green-10 disabled:text-ibm-gray-40 h-6 w-6 p-0"
+                        >
+                          <Plus className="w-3 h-3" />
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Empty state message */}
+              {Object.keys(data || {}).length === 0 && (
+                <div className="text-center py-6">
+                  <Key className="w-8 h-8 text-ibm-gray-30 mx-auto mb-2" />
+                  <p className="text-sm text-ibm-gray-70">
+                    {readOnly ? "No properties found" : "Add your first property using the form below"}
+                  </p>
+                </div>
+              )}
+            </div>
+            </div>
+            </div>
+          </TabsContent>
+
+          <TabsContent value="text" className="mt-4">
+            <div className="space-y-4">
+              <div>
+              <div className="flex items-center gap-2">
+                <Label className="text-sm font-medium text-ibm-gray-100">Format:</Label>
+                <Select value={fileType} onValueChange={(value) => setFileType(value as FileType)}>
+                    <SelectTrigger className="w-30 h-6" >
+                      <SelectValue placeholder="Select a certificate type" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="application/json">JSON</SelectItem>
+                      <SelectItem value="text/properties">Properties</SelectItem>
+                      <SelectItem value="application/yaml">YAML</SelectItem>
+                    </SelectContent>
+                  </Select>
+    
+                </div>
+                <Textarea
+                  value={textData}
+                  onChange={(e) => setTextData(e.target.value)}
+                  placeholder='{\n  "key1": "value1",\n  "key2": "value2"\n}'
+                  className="mt-2 min-h-[200px] max-h-80 font-mono text-sm resize-none"
+                  readOnly={readOnly}
+                />
+               <div className="mt-2 flex items-center gap-2">
+                <FileImport
+                  onFileContent={(content, fileName, fileType) => {
+                    console.log("fileType", fileType, "content", content)
+                    setTextData(content)
+                    setFileType(fileType as FileType)
+                  }}
+                  acceptedTypes={["application/json", "application/yaml", "text/properties"]}
+                  buttonText="Import content"
+                  buttonVariant="ghost"
+                  buttonSize="sm"
+                />
+                <p className="text-xs text-ibm-gray-70">
+                Enter your secret data in JSON, YAML or Properties format. All values will be converted to key/value strings.
+                </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">Secret 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 secret
+                      </p>
+                    </div>
+                  )}
+                </div>
+                <p className="text-xs text-ibm-gray-70 mt-1">
+                  This information is automatically generated by the secret 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">
+                      {currentDescription || "No description provided"}
+                    </p>
+                  </div>
+                ) : (
+                  <Input
+                    value={currentDescription}
+                    onChange={(e) => {
+                      setCurrentDescription(e.target.value)
+                      onDescriptionChange?.(e.target.value)
+                    }}
+                    placeholder="Enter secret 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="tertiary"
+            style={{borderRadius: 0}}
+            size="sm"
+            onClick={handleUpdate}
+            disabled={!hasChanges || Object.keys(data || {}).length === 0}
+          >
+            Commit changes
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}