fix: style

feat/tool-oauth
zxhlyh 7 months ago
parent 0dcdfd6de3
commit 3f65117007

@ -24,7 +24,7 @@ const AddApiKeyButton = ({
return ( return (
<> <>
<Button <Button
className='w-0 grow' className='w-full'
variant={buttonVariant} variant={buttonVariant}
onClick={() => setIsApiKeyModalOpen(true)} onClick={() => setIsApiKeyModalOpen(true)}
disabled={disabled} disabled={disabled}

@ -162,7 +162,7 @@ const AddOAuthButton = ({
return 'default' return 'default'
} }
else { else {
if (is_oauth_custom_client_enabled) if (is_oauth_custom_client_enabled)
return 'custom' return 'custom'
@ -170,8 +170,6 @@ const AddOAuthButton = ({
} }
}, [isConfigured, is_oauth_custom_client_enabled]) }, [isConfigured, is_oauth_custom_client_enabled])
console.log('__auth_client__', __auth_client__)
return ( return (
<> <>
{ {
@ -179,22 +177,27 @@ const AddOAuthButton = ({
<Button <Button
variant={buttonVariant} variant={buttonVariant}
className={cn( className={cn(
'w-0 grow px-0 py-0 hover:bg-components-button-primary-bg', 'w-full py-0 pl-0.5 pr-0 hover:bg-components-button-primary-bg',
className, className,
)} )}
disabled={disabled} disabled={disabled}
onClick={handleOAuth} onClick={handleOAuth}
> >
<div className={cn( <div className={cn(
'flex h-full grow items-center justify-center rounded-l-lg hover:bg-components-button-primary-bg-hover', 'flex h-full w-0 grow items-center justify-center rounded-l-lg hover:bg-components-button-primary-bg-hover',
buttonLeftClassName, buttonLeftClassName,
)}> )}>
{buttonText} <div
className='truncate'
title={buttonText}
>
{buttonText}
</div>
{ {
is_oauth_custom_client_enabled && ( is_oauth_custom_client_enabled && (
<Badge <Badge
className={cn( className={cn(
'ml-1', 'ml-1 mr-0.5',
buttonVariant === 'primary' && 'border-text-primary-on-surface bg-components-badge-bg-dimm text-text-primary-on-surface', buttonVariant === 'primary' && 'border-text-primary-on-surface bg-components-badge-bg-dimm text-text-primary-on-surface',
)} )}
> >
@ -204,7 +207,7 @@ const AddOAuthButton = ({
} }
</div> </div>
<div className={cn( <div className={cn(
'h-4 w-[1px] bg-text-primary-on-surface opacity-[0.15]', 'h-4 w-[1px] shrink-0 bg-text-primary-on-surface opacity-[0.15]',
dividerClassName, dividerClassName,
)}></div> )}></div>
<div <div
@ -228,7 +231,7 @@ const AddOAuthButton = ({
variant={buttonVariant} variant={buttonVariant}
onClick={() => setIsOAuthSettingsOpen(true)} onClick={() => setIsOAuthSettingsOpen(true)}
disabled={disabled} disabled={disabled}
className='w-0 grow' className='w-full'
> >
<RiEqualizer2Line className='mr-0.5 h-4 w-4' /> <RiEqualizer2Line className='mr-0.5 h-4 w-4' />
{t('plugin.auth.setupOAuth')} {t('plugin.auth.setupOAuth')}

@ -65,10 +65,12 @@ const Authorize = ({
<div className='flex items-center space-x-1.5'> <div className='flex items-center space-x-1.5'>
{ {
canOAuth && ( canOAuth && (
<AddOAuthButton <div className='min-w-0 flex-[1]'>
{...oAuthButtonProps} <AddOAuthButton
disabled={disabled} {...oAuthButtonProps}
/> disabled={disabled}
/>
</div>
) )
} }
{ {
@ -82,10 +84,12 @@ const Authorize = ({
} }
{ {
canApiKey && ( canApiKey && (
<AddApiKeyButton <div className='min-w-0 flex-[1]'>
{...apiKeyButtonProps} <AddApiKeyButton
disabled={disabled} {...apiKeyButtonProps}
/> disabled={disabled}
/>
</div>
) )
} }
</div> </div>

@ -3,14 +3,17 @@ import Authorize from './authorize'
import Authorized from './authorized' import Authorized from './authorized'
import type { PluginPayload } from './types' import type { PluginPayload } from './types'
import { usePluginAuth } from './hooks/use-plugin-auth' import { usePluginAuth } from './hooks/use-plugin-auth'
import cn from '@/utils/classnames'
type PluginAuthProps = { type PluginAuthProps = {
pluginPayload: PluginPayload pluginPayload: PluginPayload
children?: React.ReactNode children?: React.ReactNode
className?: string
} }
const PluginAuth = ({ const PluginAuth = ({
pluginPayload, pluginPayload,
children, children,
className,
}: PluginAuthProps) => { }: PluginAuthProps) => {
const { const {
isAuthorized, isAuthorized,
@ -21,7 +24,7 @@ const PluginAuth = ({
} = usePluginAuth(pluginPayload, !!pluginPayload.provider) } = usePluginAuth(pluginPayload, !!pluginPayload.provider)
return ( return (
<> <div className={cn(!isAuthorized && className)}>
{ {
!isAuthorized && ( !isAuthorized && (
<Authorize <Authorize
@ -46,7 +49,7 @@ const PluginAuth = ({
{ {
isAuthorized && children isAuthorized && children
} }
</> </div>
) )
} }

@ -232,7 +232,7 @@ const BasePanel: FC<BasePanelProps> = ({
return buildInTools.find(item => canFindTool(item.id, data.provider_id)) return buildInTools.find(item => canFindTool(item.id, data.provider_id))
}, [buildInTools, data.provider_id]) }, [buildInTools, data.provider_id])
const showPluginAuth = useMemo(() => { const showPluginAuth = useMemo(() => {
return data.type === BlockEnum.Tool && currCollection?.allow_delete && !currCollection.is_team_authorization return data.type === BlockEnum.Tool && currCollection?.allow_delete
}, [currCollection, data.type]) }, [currCollection, data.type])
const handleAuthorizationItemClick = useCallback((credential_id: string) => { const handleAuthorizationItemClick = useCallback((credential_id: string) => {
handleNodeDataUpdate({ handleNodeDataUpdate({
@ -378,16 +378,25 @@ const BasePanel: FC<BasePanelProps> = ({
{ {
showPluginAuth && ( showPluginAuth && (
<PluginAuth <PluginAuth
className='px-4 pb-2'
pluginPayload={{ pluginPayload={{
provider: currCollection?.name || '', provider: currCollection?.name || '',
category: AuthCategory.tool, category: AuthCategory.tool,
}} }}
> >
<div className='pl-4'> <div className='flex items-center justify-between pl-4 pr-3'>
<Tab <Tab
value={tabType} value={tabType}
onChange={setTabType} onChange={setTabType}
/> />
<AuthorizedInNode
pluginPayload={{
provider: currCollection?.name || '',
category: AuthCategory.tool,
}}
onAuthorizationItemClick={handleAuthorizationItemClick}
credentialId={data.credential_id}
/>
</div> </div>
</PluginAuth> </PluginAuth>
) )
@ -399,18 +408,6 @@ const BasePanel: FC<BasePanelProps> = ({
value={tabType} value={tabType}
onChange={setTabType} onChange={setTabType}
/> />
{
currCollection?.allow_delete && (
<AuthorizedInNode
pluginPayload={{
provider: currCollection?.name || '',
category: AuthCategory.tool,
}}
onAuthorizationItemClick={handleAuthorizationItemClick}
credentialId={data.credential_id}
/>
)
}
</div> </div>
) )
} }

Loading…
Cancel
Save