Repository: supabase/supabase
File: apps/studio/components/interfaces/Functions/EdgeFunctionSecrets/EditSecretSheet.tsx (TypeScript)

Code before:
    },
  })

  function isClosingSidePanel() {
    form.formState.isDirty ? setIsClosingPanel(true) : onClose()
  }
  const onSubmit: SubmitHandler<FormSchemaType> = async (data) => {
    if (secret === undefined) {
      return
    }

    updateSecret({
      projectRef,
      secrets: [{ name: secret?.name, value: data.value }],
    })
  }

  useEffect(() => {
    if (visible) {
      setFocusedEditor(false)
      form.reset({ value: '' })
    }
  }, [visible, secret])

  return (
    <Sheet open={visible} onOpenChange={() => isClosingSidePanel()}>
      <SheetContent
        showClose={false}
        size={'default'}
        className={'p-0 flex flex-row gap-0 !min-w-screen lg:!min-w-[600px]'}
      >
        <div className="flex flex-col grow w-full">
          <SheetHeader className="py-3 flex flex-row justify-between items-center border-b-0">
            <div className="flex flex-row gap-3 items-center max-w-[75%]">
              <SheetClose
                className={cn(
                  'text-muted hover:text ring-offset-background transition-opacity hover:opacity-100',
                  'focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
                  'disabled:pointer-events-none data-[state=open]:bg-secondary',
                  'transition'
                )}
              >
                <X className="h-3 w-3" />
                <span className="sr-only">Close</span>
              </SheetClose>
              <SheetTitle className="truncate">Edit secret</SheetTitle>
            </div>
          </SheetHeader>
          <Separator />
          <Form_Shadcn_ {...form}>
            <form

Review comment (suggestion):
```suggestion
    <Sheet open={visible} onOpenChange={isClosingSidePanel}>
```

The naming of this function is a bit odd, I would expect `isClosingSidePanel` to be a boolean, not a function

Code after:
  const isValid = form.formState.isValid

  const { ref: projectRef } = useParams()
  const { mutate: updateSecret, isLoading: 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, modal: closeConfirmationModal } = 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}
    </Sheet>
  )
}

const Header = (): ReactNode => {
  return (
    <SheetHeader className="py-3 flex flex-row gap-3 items-center border-b-0">
      <SheetClose
        className={cn(
          'text-muted hover:text ring-offset-background hover:opacity-100',