mirror of
https://github.com/langgenius/dify.git
synced 2026-03-23 15:27:53 +08:00
45c96dc254
Problem: Model provider settings page (/plugins?action=showSettings&tab=provider) was missing plugin update indicators (red dot badge, Update button) that the /plugins page correctly displayed, because it only fetched installation data without querying for latest marketplace versions. Decision: Extract a shared usePluginsWithLatestVersion hook and migrate plugin API endpoints to oRPC contracts, ensuring both pages use identical data flows. Model: Both pages now follow the same pattern — fetch installed plugins via consoleQuery.plugins.checkInstalled, enrich with latest version metadata via usePluginsWithLatestVersion, then pass complete PluginDetail objects downstream where useDetailHeaderState computes hasNewVersion for UI indicators. Impact: - Update badge red dot and Update button now appear on provider settings page - Shared hook eliminates 15 lines of duplicate enrichment logic in plugins-panel - oRPC contracts replace legacy post() calls for plugin endpoints - Operation dropdown uses auto-width to prevent "View on Marketplace" text wrapping - Version badge aligned to use Badge component consistently across both pages - Update button tooltip added with bilingual i18n support - Deprecated Tooltip migrated to Base UI Tooltip in detail-header
84 lines
2.7 KiB
TypeScript
84 lines
2.7 KiB
TypeScript
'use client'
|
|
import type { FC } from 'react'
|
|
import type { Placement } from '@/app/components/base/ui/placement'
|
|
import * as React from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuSeparator,
|
|
DropdownMenuTrigger,
|
|
} from '@/app/components/base/ui/dropdown-menu'
|
|
import { useGlobalPublicStore } from '@/context/global-public-context'
|
|
import { cn } from '@/utils/classnames'
|
|
import { PluginSource } from '../types'
|
|
|
|
type Props = {
|
|
source: PluginSource
|
|
onInfo: () => void
|
|
onCheckVersion: () => void
|
|
onRemove: () => void
|
|
detailUrl: string
|
|
placement?: Placement
|
|
sideOffset?: number
|
|
alignOffset?: number
|
|
popupClassName?: string
|
|
}
|
|
|
|
const OperationDropdown: FC<Props> = ({
|
|
source,
|
|
detailUrl,
|
|
onInfo,
|
|
onCheckVersion,
|
|
onRemove,
|
|
placement = 'bottom-end',
|
|
sideOffset = 4,
|
|
alignOffset = 0,
|
|
popupClassName,
|
|
}) => {
|
|
const { t } = useTranslation()
|
|
const [open, setOpen] = React.useState(false)
|
|
const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures)
|
|
|
|
return (
|
|
<DropdownMenu open={open} onOpenChange={setOpen}>
|
|
<DropdownMenuTrigger
|
|
className={cn('action-btn action-btn-m', open && 'bg-state-base-hover')}
|
|
>
|
|
<span className="i-ri-more-fill h-4 w-4" />
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent
|
|
placement={placement}
|
|
sideOffset={sideOffset}
|
|
alignOffset={alignOffset}
|
|
popupClassName={cn('w-auto min-w-[160px]', popupClassName)}
|
|
>
|
|
{source === PluginSource.github && (
|
|
<DropdownMenuItem onClick={onInfo}>
|
|
{t('detailPanel.operation.info', { ns: 'plugin' })}
|
|
</DropdownMenuItem>
|
|
)}
|
|
{source === PluginSource.github && (
|
|
<DropdownMenuItem onClick={onCheckVersion}>
|
|
{t('detailPanel.operation.checkUpdate', { ns: 'plugin' })}
|
|
</DropdownMenuItem>
|
|
)}
|
|
{(source === PluginSource.marketplace || source === PluginSource.github) && enable_marketplace && (
|
|
<DropdownMenuItem render={<a href={detailUrl} target="_blank" rel="noopener noreferrer" />}>
|
|
<span className="grow">{t('detailPanel.operation.viewDetail', { ns: 'plugin' })}</span>
|
|
<span className="i-ri-arrow-right-up-line h-3.5 w-3.5 shrink-0 text-text-tertiary" />
|
|
</DropdownMenuItem>
|
|
)}
|
|
{(source === PluginSource.marketplace || source === PluginSource.github) && enable_marketplace && (
|
|
<DropdownMenuSeparator />
|
|
)}
|
|
<DropdownMenuItem destructive onClick={onRemove}>
|
|
{t('detailPanel.operation.remove', { ns: 'plugin' })}
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
)
|
|
}
|
|
export default React.memo(OperationDropdown)
|