dify/web/app/components/plugins/plugin-auth/authorize/add-api-key-button.tsx
yyh e1bbe57f9c
refactor(web): re-design button api (#35166)
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
2026-04-14 13:22:23 +00:00

55 lines
1.3 KiB
TypeScript

import type { PluginPayload } from '../types'
import type { FormSchema } from '@/app/components/base/form/types'
import type { ButtonProps } from '@/app/components/base/ui/button'
import {
memo,
useState,
} from 'react'
import { Button } from '@/app/components/base/ui/button'
import ApiKeyModal from './api-key-modal'
export type AddApiKeyButtonProps = {
pluginPayload: PluginPayload
buttonVariant?: ButtonProps['variant']
buttonText?: string
disabled?: boolean
onUpdate?: () => void
formSchemas?: FormSchema[]
}
const AddApiKeyButton = ({
pluginPayload,
buttonVariant = 'secondary-accent',
buttonText = 'Use Api Key',
disabled,
onUpdate,
formSchemas = [],
}: AddApiKeyButtonProps) => {
const [isApiKeyModalOpen, setIsApiKeyModalOpen] = useState(false)
return (
<>
<Button
className="w-full"
variant={buttonVariant}
onClick={() => setIsApiKeyModalOpen(true)}
disabled={disabled}
>
{buttonText}
</Button>
{
isApiKeyModalOpen && (
<ApiKeyModal
pluginPayload={pluginPayload}
onClose={() => setIsApiKeyModalOpen(false)}
onUpdate={onUpdate}
formSchemas={formSchemas}
/>
)
}
</>
)
}
export default memo(AddApiKeyButton)