opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-04-21 15:07:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(workflow): avoid nested buttons in subscription selector to stop hydration warning

Browse Source
This commit is contained in:
lyzno1 2025-10-27 17:23:58 +08:00
parent 1335be8d60
commit e074ba84d1
No known key found for this signature in database
1 changed files with 17 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
web/app/components/plugins/plugin-detail-panel/subscription-list/selector-view.tsx
View File

@ -40,31 +40,36 @@ export const SubscriptionSelectorView: React.FC<SubscriptionSelectorProps> = ({
</div>} </div>}
<div className='max-h-[320px] overflow-y-auto'> <div className='max-h-[320px] overflow-y-auto'>
{subscriptions?.map(subscription => ( {subscriptions?.map(subscription => (
<button <div
key={subscription.id} key={subscription.id}
className={cn( className={cn(
'group flex w-full items-center justify-between rounded-lg p-1 text-left transition-colors', 'group flex w-full items-center justify-between rounded-lg p-1 text-left transition-colors',
'hover:bg-state-base-hover has-[.subscription-delete-btn:hover]:!bg-state-destructive-hover', 'hover:bg-state-base-hover has-[.subscription-delete-btn:hover]:!bg-state-destructive-hover',
selectedId === subscription.id && 'bg-state-base-hover', selectedId === subscription.id && 'bg-state-base-hover',
)} )}
onClick={() => onSelect?.(subscription)}
> >
<div className='flex items-center'> <button
{selectedId === subscription.id && ( type='button'
<RiCheckLine className='mr-2 h-4 w-4 shrink-0 text-text-accent' /> className='flex flex-1 items-center text-left'
)} onClick={() => onSelect?.(subscription)}
<RiWebhookLine className={cn('mr-1.5 h-3.5 w-3.5 text-text-secondary', selectedId !== subscription.id && 'ml-6')} /> >
<span className='system-md-regular leading-6 text-text-secondary'> <div className='flex items-center'>
{subscription.name} {selectedId === subscription.id && (
</span> <RiCheckLine className='mr-2 h-4 w-4 shrink-0 text-text-accent' />
</div> )}
<RiWebhookLine className={cn('mr-1.5 h-3.5 w-3.5 text-text-secondary', selectedId !== subscription.id && 'ml-6')} />
<span className='system-md-regular leading-6 text-text-secondary'>
{subscription.name}
</span>
</div>
</button>
<ActionButton onClick={(e) => { <ActionButton onClick={(e) => {
e.stopPropagation() e.stopPropagation()
setDeletedSubscription(subscription) setDeletedSubscription(subscription)
}} className='subscription-delete-btn hidden shrink-0 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive group-hover:flex'> }} className='subscription-delete-btn hidden shrink-0 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive group-hover:flex'>
<RiDeleteBinLine className='size-4' /> <RiDeleteBinLine className='size-4' />
</ActionButton> </ActionButton>
</button> </div>
))} ))}
</div> </div>
{deletedSubscription && ( {deletedSubscription && (