refactor(web): migrate simple overlay tooltips (#35588)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

web/app/components/develop/secret-key/__tests__/input-copy.spec.tsx

@@ -35,7 +35,7 @@ describe('InputCopy', () => {
 
     it('should render with empty value by default', async () => {
       await renderAndFlush(<InputCopy />)
-      expect(screen.getByRole('button')).toBeInTheDocument()
+      expect(screen.getAllByRole('button').length).toBeGreaterThan(0)
     })
 
     it('should render children when provided', async () => {
@@ -273,12 +273,12 @@ describe('InputCopy', () => {
   describe('edge cases', () => {
     it('should handle undefined value', async () => {
       await renderAndFlush(<InputCopy value={undefined} />)
-      expect(screen.getByRole('button')).toBeInTheDocument()
+      expect(screen.getAllByRole('button').length).toBeGreaterThan(0)
     })
 
     it('should handle empty string value', async () => {
       await renderAndFlush(<InputCopy value="" />)
-      expect(screen.getByRole('button')).toBeInTheDocument()
+      expect(screen.getAllByRole('button').length).toBeGreaterThan(0)
     })
 
     it('should handle very long values', async () => {

web/app/components/develop/secret-key/input-copy.tsx

@@ -1,9 +1,9 @@
 'use client'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
 import { t } from 'i18next'
 import * as React from 'react'
 import { useEffect, useState } from 'react'
 import CopyFeedback from '@/app/components/base/copy-feedback'
-import Tooltip from '@/app/components/base/tooltip'
 import { writeTextToClipboard } from '@/utils/clipboard'
 
 type IInputCopyProps = {
@@ -18,6 +18,12 @@ const InputCopy = ({
   children,
 }: IInputCopyProps) => {
   const [isCopied, setIsCopied] = useState(false)
+  const copyLabel = isCopied ? `${t('copied', { ns: 'appApi' })}` : `${t('copy', { ns: 'appApi' })}`
+  const handleCopy = () => {
+    writeTextToClipboard(value).then(() => {
+      setIsCopied(true)
+    })
+  }
 
   useEffect(() => {
     if (isCopied) {
@@ -38,17 +44,24 @@ const InputCopy = ({
         <div className="relative h-full grow text-[13px]">
           <div
             className="r-0 absolute top-0 left-0 w-full cursor-pointer truncate pr-2 pl-2"
-            onClick={() => {
-              writeTextToClipboard(value).then(() => {
-                setIsCopied(true)
-              })
+            role="button"
+            aria-label={copyLabel}
+            tabIndex={0}
+            onClick={handleCopy}
+            onKeyDown={(event) => {
+              if (event.key === 'Enter' || event.key === ' ') {
+                event.preventDefault()
+                handleCopy()
+              }
             }}
           >
-            <Tooltip
-              popupContent={isCopied ? `${t('copied', { ns: 'appApi' })}` : `${t('copy', { ns: 'appApi' })}`}
-              position="bottom"
-            >
-              <span className="text-text-secondary">{value}</span>
+            <Tooltip>
+              <TooltipTrigger
+                render={<span className="text-text-secondary">{value}</span>}
+              />
+              <TooltipContent placement="bottom">
+                {copyLabel}
+              </TooltipContent>
             </Tooltip>
           </div>
         </div>