|
|
|
|
@ -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>
|
|
|
|
|
))}
|
|
|
|
|
|
KVOJJJin
10 months ago
committed by
GitHub