fix(web): using Tooltip unique selector key (#622)

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

 'use client'
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import copy from 'copy-to-clipboard'
 import { t } from 'i18next'
 import s from './style.module.css'
+import { randomString } from '@/app/components/app-sidebar/basic'
 import Tooltip from '@/app/components/base/tooltip'
 
 type IInputCopyProps = {
@@ -13,13 +14,15 @@ type IInputCopyProps = {
 }
 
 const InputCopy = ({
-  value,
+  value = '',
   className,
   readOnly = true,
   children,
 }: IInputCopyProps) => {
   const [isCopied, setIsCopied] = useState(false)
 
+  const selector = useRef(`input-tooltip-${randomString(4)}`)
+
   useEffect(() => {
     if (isCopied) {
       const timeout = setTimeout(() => {
@@ -38,7 +41,7 @@ const InputCopy = ({
         {children}
         <div className='flex-grow bg-gray-50 text-[13px] relative h-full'>
           <Tooltip
-            selector="top-uniq"
+            selector={selector.current}
             content={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
             className='z-10'
           >
@@ -50,7 +53,7 @@ const InputCopy = ({
         </div>
         <div className="flex-shrink-0 h-4 bg-gray-200 border" />
         <Tooltip
-          selector="top-uniq"
+          selector={selector.current}
           content={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
           className='z-10'
         >

web/app/components/develop/secret-key/secret-key-generate.tsx

@@ -18,7 +18,7 @@ const SecretKeyGenerateModal = ({
   isShow = false,
   onClose,
   newKey,
-  className
+  className,
 }: ISecretKeyGenerateModalProps) => {
   const { t } = useTranslation()
   return (

web/app/components/develop/secret-key/secret-key-modal.tsx

@@ -6,6 +6,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { PlusIcon, XMarkIcon } from '@heroicons/react/20/solid'
 import useSWR, { useSWRConfig } from 'swr'
+import { useContext } from 'use-context-selector'
 import SecretKeyGenerateModal from './secret-key-generate'
 import s from './style.module.css'
 import Modal from '@/app/components/base/modal'
@@ -16,7 +17,6 @@ import Tooltip from '@/app/components/base/tooltip'
 import Loading from '@/app/components/base/loading'
 import Confirm from '@/app/components/base/confirm'
 import useCopyToClipboard from '@/hooks/use-copy-to-clipboard'
-import { useContext } from 'use-context-selector'
 import I18n from '@/context/i18n'
 
 type ISecretKeyModalProps = {
@@ -58,12 +58,11 @@ const SecretKeyModal = ({
     }
   }, [copyValue])
 
-
   const onDel = async () => {
     setShowConfirmDelete(false)
-    if (!delKeyID) {
+    if (!delKeyID)
       return
-    }
+
     await delApikey({ url: `/apps/${appId}/api-keys/${delKeyID}`, params: {} })
     mutate(commonParams)
   }
@@ -80,11 +79,10 @@ const SecretKeyModal = ({
   }
 
   const formatDate = (timestamp: any) => {
-    if (locale === 'en') {
+    if (locale === 'en')
       return new Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'long', day: 'numeric' }).format((+timestamp) * 1000)
-    } else {
+    else
       return new Intl.DateTimeFormat('fr-CA', { year: 'numeric', month: '2-digit', day: '2-digit' }).format((+timestamp) * 1000)
-    }
   }
 
   return (
@@ -111,7 +109,7 @@ const SecretKeyModal = ({
                   <div className='flex-shrink-0 px-3 truncate w-28'>{api.last_used_at ? formatDate(api.last_used_at) : t('appApi.never')}</div>
                   <div className='flex flex-grow px-3'>
                     <Tooltip
-                      selector="top-uniq"
+                      selector={`key-${api.token}`}
                       content={copyValue === api.token ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
                       className='z-10'
                     >

web/app/components/header/account-setting/members-page/invited-modal/invitation-link.tsx

 'use client'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { t } from 'i18next'
 import s from './index.module.css'
 import Tooltip from '@/app/components/base/tooltip'
 import useCopyToClipboard from '@/hooks/use-copy-to-clipboard'
+import { randomString } from '@/app/components/app-sidebar/basic'
 
 type IInvitationLinkProps = {
   value?: string
@@ -13,6 +14,7 @@ const InvitationLink = ({
   value = '',
 }: IInvitationLinkProps) => {
   const [isCopied, setIsCopied] = useState(false)
+  const selector = useRef(`invite-link-${randomString(4)}`)
   const [_, copy] = useCopyToClipboard()
 
   const copyHandle = useCallback(() => {
@@ -37,7 +39,7 @@ const InvitationLink = ({
       <div className="flex items-center flex-grow h-5">
         <div className='flex-grow bg-gray-100 text-[13px] relative h-full'>
           <Tooltip
-            selector="top-uniq"
+            selector={selector.current}
             content={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
             className='z-10'
           >
@@ -46,7 +48,7 @@ const InvitationLink = ({
         </div>
         <div className="flex-shrink-0 h-4 bg-gray-200 border" />
         <Tooltip
-          selector="top-uniq"
+          selector={selector.current}
           content={isCopied ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
           className='z-10'
         >