EditSecretSheet() — supabase Function Reference

Source Code

apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EditSecretSheet.tsx lines 48–104

export function EditSecretSheet({ secret, visible, onClose }: EditSecretSheetProps) {
  const secretName = useLatest(secret?.name)
  const form = useForm<FormSchemaType>({
    resolver: zodResolver(FormSchema),
  })
  useEffect(() => {
    if (visible) {
      form.reset({
        name: secretName.current ?? '',
        value: '',
      })
    }
  }, [form, secretName, visible])
  const isValid = form.formState.isValid

  const { ref: projectRef } = useParams()
  const { mutate: updateSecret, isPending: isUpdating } = useSecretsCreateMutation({
    onSuccess: (_, variables) => {
      toast.success(`Successfully updated secret "${variables.secrets[0].name}"`)
      onClose()
    },
  })
  const onSubmit: SubmitHandler<FormSchemaType> = async ({ name, value }) => {
    updateSecret({
      projectRef,
      secrets: [{ name, value }],
    })
  }

  const { confirmOnClose, modalProps: closeConfirmationModalProps } = useConfirmOnClose({
    checkIsDirty: () => form.formState.isDirty,
    onClose,
  })

  return (
    <Sheet open={visible} onOpenChange={confirmOnClose}>
      <SheetContent
        showClose={false}
        size={'default'}
        className={'!min-w-screen lg:!min-w-[600px] flex flex-col'}
      >
        <Header />
        <Separator />
        <FormBody form={form} onSubmit={onSubmit} />
        <SheetFooter>
          <Button disabled={isUpdating} type="default" onClick={confirmOnClose}>
            Cancel
          </Button>
          <Button form={FORM_ID} htmlType="submit" disabled={!isValid} loading={isUpdating}>
            Save
          </Button>
        </SheetFooter>
      </SheetContent>
      <CloseConfirmationModal {...closeConfirmationModalProps} />
    </Sheet>
  )
}