Feat: api page dark mode (#18078)

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

@@ -1,16 +1,17 @@
 'use client'
 import {
-  useEffect,
   useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
+import { RiDeleteBinLine } from '@remixicon/react'
 import { PlusIcon, XMarkIcon } from '@heroicons/react/20/solid'
 import useSWR, { useSWRConfig } from 'swr'
-import copy from 'copy-to-clipboard'
 import SecretKeyGenerateModal from './secret-key-generate'
 import s from './style.module.css'
+import ActionButton from '@/app/components/base/action-button'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
+import CopyFeedback from '@/app/components/base/copy-feedback'
 import {
   createApikey as createAppApikey,
   delApikey as delAppApikey,
@@ -22,7 +23,6 @@ import {
   fetchApiKeysList as fetchDatasetApiKeysList,
 } from '@/service/datasets'
 import type { CreateApiKeyResponse } from '@/models/app'
-import Tooltip from '@/app/components/base/tooltip'
 import Loading from '@/app/components/base/loading'
 import Confirm from '@/app/components/base/confirm'
 import useTimestamp from '@/hooks/use-timestamp'
@@ -54,20 +54,6 @@ const SecretKeyModal = ({
 
   const [delKeyID, setDelKeyId] = useState('')
 
-  const [copyValue, setCopyValue] = useState('')
-
-  useEffect(() => {
-    if (copyValue) {
-      const timeout = setTimeout(() => {
-        setCopyValue('')
-      }, 1000)
-
-      return () => {
-        clearTimeout(timeout)
-      }
-    }
-  }, [copyValue])
-
   const onDel = async () => {
     setShowConfirmDelete(false)
     if (!delKeyID)
@@ -104,7 +90,7 @@ const SecretKeyModal = ({
       {
         !!apiKeysList?.data?.length && (
           <div className='mt-4 flex grow flex-col overflow-hidden'>
-            <div className='flex h-9 shrink-0 items-center border-b border-solid text-xs font-semibold text-text-tertiary'>
+            <div className='flex h-9 shrink-0 items-center border-b border-divider-regular text-xs font-semibold text-text-tertiary'>
               <div className='w-64 shrink-0 px-3'>{t('appApi.apiKeyModal.secretKey')}</div>
               <div className='w-[200px] shrink-0 px-3'>{t('appApi.apiKeyModal.created')}</div>
               <div className='w-[200px] shrink-0 px-3'>{t('appApi.apiKeyModal.lastUsed')}</div>
@@ -112,28 +98,22 @@ const SecretKeyModal = ({
             </div>
             <div className='grow overflow-auto'>
               {apiKeysList.data.map(api => (
-                <div className='flex h-9 items-center border-b border-solid text-sm font-normal text-text-secondary' key={api.id}>
+                <div className='flex h-9 items-center border-b border-divider-regular text-sm font-normal text-text-secondary' key={api.id}>
                   <div className='w-64 shrink-0 truncate px-3 font-mono'>{generateToken(api.token)}</div>
                   <div className='w-[200px] shrink-0 truncate px-3'>{formatTime(Number(api.created_at), t('appLog.dateTimeFormat') as string)}</div>
                   <div className='w-[200px] shrink-0 truncate px-3'>{api.last_used_at ? formatTime(Number(api.last_used_at), t('appLog.dateTimeFormat') as string) : t('appApi.never')}</div>
-                  <div className='flex grow px-3'>
-                    <Tooltip
-                      popupContent={copyValue === api.token ? `${t('appApi.copied')}` : `${t('appApi.copy')}`}
-                      popupClassName='mr-1'
-                    >
-                      <div className={`mr-1 flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg hover:bg-state-base-hover ${s.copyIcon} ${copyValue === api.token ? s.copied : ''}`} onClick={() => {
-                        // setIsCopied(true)
-                        copy(api.token)
-                        setCopyValue(api.token)
-                      }}></div>
-                    </Tooltip>
-                    {isCurrentWorkspaceManager
-                      && <div className={`flex h-6 w-6 shrink-0 cursor-pointer items-center justify-center rounded-lg ${s.trashIcon}`} onClick={() => {
-                        setDelKeyId(api.id)
-                        setShowConfirmDelete(true)
-                      }}>
-                      </div>
-                    }
+                  <div className='flex grow space-x-2 px-3'>
+                    <CopyFeedback content={api.token} />
+                    {isCurrentWorkspaceManager && (
+                      <ActionButton
+                        onClick={() => {
+                          setDelKeyId(api.id)
+                          setShowConfirmDelete(true)
+                        }}
+                      >
+                        <RiDeleteBinLine className='h-4 w-4' />
+                      </ActionButton>
+                    )}
                   </div>
                 </div>
               ))}