feat: Add duplicate key check with confirmation dialog for Edge Function secrets (supabase#36793)

- Created DuplicateSecretWarningModal component following the pattern of DeployEdgeFunctionWarningModal
- Added duplicate key detection logic to AddNewSecretForm before secret creation
- Shows confirmation dialog when attempting to create a secret with an existing name
- Allows users to proceed with replacing the existing secret or cancel the operation

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Claude <[email protected]>

Author: laktek

apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/AddNewSecretForm.tsx

@@ -7,7 +7,9 @@ import z from 'zod'
 import { useParams } from 'common'
 import Panel from 'components/ui/Panel'
 import { useSecretsCreateMutation } from 'data/secrets/secrets-create-mutation'
+import { useSecretsQuery } from 'data/secrets/secrets-query'
 import { Eye, EyeOff, MinusCircle } from 'lucide-react'
+import { DuplicateSecretWarningModal } from './DuplicateSecretWarningModal'
 import {
   Button,
   Form_Shadcn_,
@@ -44,6 +46,8 @@ const defaultValues = {
 const AddNewSecretForm = () => {
   const { ref: projectRef } = useParams()
   const [showSecretValue, setShowSecretValue] = useState(false)
+  const [duplicateSecretName, setDuplicateSecretName] = useState<string>('')
+  const [pendingSecrets, setPendingSecrets] = useState<z.infer<typeof FormSchema> | null>(null)
 
   const form = useForm({
     resolver: zodResolver(FormSchema),
@@ -55,6 +59,10 @@ const AddNewSecretForm = () => {
     name: 'secrets',
   })
 
+  const { data: existingSecrets } = useSecretsQuery({
+    projectRef: projectRef,
+  })
+
   function handlePaste(e: ClipboardEvent) {
     e.preventDefault()
     const text = e.clipboardData?.getData('text')
@@ -114,9 +122,32 @@ const AddNewSecretForm = () => {
   })
 
   const onSubmit: SubmitHandler<z.infer<typeof FormSchema>> = async (data) => {
+    // Check for duplicate secret names
+    const existingSecretNames = existingSecrets?.map((secret) => secret.name) || []
+    const duplicateSecret = data.secrets.find((secret) => existingSecretNames.includes(secret.name))
+
+    if (duplicateSecret) {
+      setDuplicateSecretName(duplicateSecret.name)
+      setPendingSecrets(data)
+      return
+    }
+
     createSecret({ projectRef, secrets: data.secrets })
   }
 
+  const handleConfirmDuplicate = () => {
+    if (pendingSecrets) {
+      createSecret({ projectRef, secrets: pendingSecrets.secrets })
+      setDuplicateSecretName('')
+      setPendingSecrets(null)
+    }
+  }
+
+  const handleCancelDuplicate = () => {
+    setDuplicateSecretName('')
+    setPendingSecrets(null)
+  }
+
   return (
     <Panel>
       <Panel.Content className="grid gap-4">
@@ -202,6 +233,14 @@ const AddNewSecretForm = () => {
           </form>
         </Form_Shadcn_>
       </Panel.Content>
+
+      <DuplicateSecretWarningModal
+        visible={!!duplicateSecretName}
+        onCancel={handleCancelDuplicate}
+        onConfirm={handleConfirmDuplicate}
+        isCreating={isCreating}
+        secretName={duplicateSecretName}
+      />
     </Panel>
   )
 }

apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/DuplicateSecretWarningModal.tsx

@@ -0,0 +1,36 @@
+import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
+
+interface DuplicateSecretWarningModalProps {
+  visible: boolean
+  onCancel: () => void
+  onConfirm: () => void
+  isCreating: boolean
+  secretName: string
+}
+
+export const DuplicateSecretWarningModal = ({
+  visible,
+  onCancel,
+  onConfirm,
+  isCreating,
+  secretName,
+}: DuplicateSecretWarningModalProps) => {
+  return (
+    <ConfirmationModal
+      visible={visible}
+      size="medium"
+      title="Confirm replacing existing secret"
+      confirmLabel="Replace secret"
+      confirmLabelLoading="Replacing secret"
+      variant="warning"
+      loading={isCreating}
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+    >
+      <p className="text-sm text-foreground-light">
+        A secret with the name "{secretName}" already exists. Continuing will replace the existing
+        secret with the new value. This action cannot be undone. Are you sure you want to proceed?
+      </p>
+    </ConfirmationModal>
+  )
+}