refactor: simplify portal interactions and manage state in Configure component (#25906)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

web/app/components/base/portal-to-follow-elem/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import {
   FloatingPortal,
   autoUpdate,
@@ -7,7 +7,6 @@ import {
   offset,
   shift,
   size,
-  useClick,
   useDismiss,
   useFloating,
   useFocus,
@@ -41,7 +40,6 @@ export function usePortalToFollowElem({
 }: PortalToFollowElemOptions = {}) {
   const [localOpen, setLocalOpen] = useState(false)
   const open = controlledOpen ?? localOpen
-  const isControlled = controlledOpen !== undefined
   const handleOpenChange = useCallback((newOpen: boolean) => {
     setLocalOpen(newOpen)
     setControlledOpen?.(newOpen)
@@ -73,24 +71,15 @@ export function usePortalToFollowElem({
 
   const hover = useHover(context, {
     move: false,
-    enabled: !isControlled,
+    enabled: controlledOpen === undefined,
   })
   const focus = useFocus(context, {
-    enabled: !isControlled,
+    enabled: controlledOpen === undefined,
   })
   const dismiss = useDismiss(context)
   const role = useRole(context, { role: 'tooltip' })
 
-  const click = useClick(context)
+  const interactions = useInteractions([hover, focus, dismiss, role])
-
-  const interactionsArray = useMemo(() => {
-    const result = [hover, focus, dismiss, role]
-
-    if (!isControlled)
-      result.push(click)
-    return result
-  }, [isControlled, hover, focus, dismiss, role, click])
-  const interactions = useInteractions(interactionsArray)
 
   return React.useMemo(
     () => ({

web/app/components/header/account-setting/data-source-page-new/configure.tsx

@@ -1,6 +1,8 @@
 import {
   memo,
+  useCallback,
   useMemo,
+  useState,
 } from 'react'
 import {
   RiAddLine,
@@ -36,6 +38,7 @@ const Configure = ({
   disabled,
 }: ConfigureProps) => {
   const { t } = useTranslation()
+  const [open, setOpen] = useState(false)
   const canApiKey = item.credential_schema?.length
   const oAuthData = item.oauth_schema || {}
   const canOAuth = oAuthData.client_schema?.length
@@ -53,16 +56,27 @@ const Configure = ({
     }
   }, [pluginPayload, t])
 
+  const handleToggle = useCallback(() => {
+    setOpen(v => !v)
+  }, [])
+
+  const handleUpdate = useCallback(() => {
+    setOpen(false)
+    onUpdate?.()
+  }, [onUpdate])
+
   return (
     <>
       <PortalToFollowElem
+        open={open}
+        onOpenChange={setOpen}
         placement='bottom-end'
         offset={{
           mainAxis: 4,
           crossAxis: -4,
         }}
       >
-        <PortalToFollowElemTrigger>
+        <PortalToFollowElemTrigger onClick={handleToggle}>
           <Button
             variant='secondary-accent'
           >
@@ -76,7 +90,7 @@ const Configure = ({
               !!canOAuth && (
                 <AddOAuthButton
                   {...oAuthButtonProps}
-                  onUpdate={onUpdate}
+                  onUpdate={handleUpdate}
                   oAuthData={{
                     schema: oAuthData.client_schema || [],
                     is_oauth_custom_client_enabled: oAuthData.is_oauth_custom_client_enabled,
@@ -102,7 +116,7 @@ const Configure = ({
                 <AddApiKeyButton
                   {...apiKeyButtonProps}
                   formSchemas={item.credential_schema}
-                  onUpdate={onUpdate}
+                  onUpdate={handleUpdate}
                   disabled={disabled}
                 />
               )