mirror of https://github.com/langgenius/dify.git
96 lines
2.8 KiB
TypeScript
96 lines
2.8 KiB
TypeScript
import type {
|
|
DataSourceCredential,
|
|
} from './types'
|
|
import {
|
|
memo,
|
|
useState,
|
|
} from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import Button from '@/app/components/base/button'
|
|
import Input from '@/app/components/base/input'
|
|
import Indicator from '@/app/components/header/indicator'
|
|
import Operator from './operator'
|
|
|
|
type ItemProps = {
|
|
credentialItem: DataSourceCredential
|
|
onAction: (action: string, credentialItem: DataSourceCredential, renamePayload?: Record<string, any>) => void
|
|
}
|
|
const Item = ({
|
|
credentialItem,
|
|
onAction,
|
|
}: ItemProps) => {
|
|
const { t } = useTranslation()
|
|
const [renaming, setRenaming] = useState(false)
|
|
const [renameValue, setRenameValue] = useState(credentialItem.name)
|
|
|
|
return (
|
|
<div className="flex h-10 items-center rounded-lg bg-components-panel-on-panel-item-bg pl-3 pr-1">
|
|
{/* <div className='mr-2 h-5 w-5 shrink-0'></div> */}
|
|
{
|
|
renaming && (
|
|
<div className="flex w-full items-center space-x-1">
|
|
<Input
|
|
wrapperClassName="grow rounded-[6px]"
|
|
className="h-6"
|
|
value={renameValue}
|
|
onChange={e => setRenameValue(e.target.value)}
|
|
placeholder={t('placeholder.input', { ns: 'common' })}
|
|
onClick={e => e.stopPropagation()}
|
|
/>
|
|
<Button
|
|
size="small"
|
|
variant="primary"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
onAction?.(
|
|
'rename',
|
|
credentialItem,
|
|
{
|
|
credential_id: credentialItem.id,
|
|
name: renameValue,
|
|
},
|
|
)
|
|
setRenaming(false)
|
|
}}
|
|
>
|
|
{t('operation.save', { ns: 'common' })}
|
|
</Button>
|
|
<Button
|
|
size="small"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
setRenaming(false)
|
|
}}
|
|
>
|
|
{t('operation.cancel', { ns: 'common' })}
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|
|
{
|
|
!renaming && (
|
|
<div className="system-sm-medium grow text-text-secondary">
|
|
{credentialItem.name}
|
|
</div>
|
|
)
|
|
}
|
|
<div className="flex shrink-0 items-center">
|
|
<div className="mr-1 flex h-3 w-3 items-center justify-center">
|
|
<Indicator color="green" />
|
|
</div>
|
|
<div className="system-xs-semibold-uppercase text-util-colors-green-green-600">
|
|
connected
|
|
</div>
|
|
</div>
|
|
<div className="ml-3 mr-2 h-3 w-[1px] bg-divider-regular"></div>
|
|
<Operator
|
|
credentialItem={credentialItem}
|
|
onAction={onAction}
|
|
onRename={() => setRenaming(true)}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default memo(Item)
|