From 22bca1f5d3b6a9174c63c90e88be67910e5140cb Mon Sep 17 00:00:00 2001 From: NFish Date: Tue, 20 May 2025 18:08:44 +0800 Subject: [PATCH] wip: add check before intall plugin --- web/app/components/plugins/card/index.tsx | 5 +++ .../steps/install.tsx | 4 +- .../plugins/plugin-page/empty/index.tsx | 37 +++++++++++++------ .../plugin-page/install-plugin-dropdown.tsx | 37 +++++++++++++------ web/i18n/en-US/plugin.ts | 1 + web/i18n/ja-JP/plugin.ts | 1 + web/i18n/zh-Hans/plugin.ts | 1 + web/types/feature.ts | 15 ++++++++ 8 files changed, 77 insertions(+), 24 deletions(-) diff --git a/web/app/components/plugins/card/index.tsx b/web/app/components/plugins/card/index.tsx index 1cc18ac24f..506c740d64 100644 --- a/web/app/components/plugins/card/index.tsx +++ b/web/app/components/plugins/card/index.tsx @@ -15,6 +15,7 @@ import { renderI18nObject } from '@/i18n' import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks' import Partner from '../base/badges/partner' import Verified from '../base/badges/verified' +import { RiProhibitedLine } from '@remixicon/react' export type Props = { className?: string @@ -89,6 +90,10 @@ const Card = ({ text={getLocalizedText(brief)} descriptionLineRows={descriptionLineRows} /> +
+ + {t('plugin.installModal.installWarning')} +
{footer &&
{footer}
} ) diff --git a/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx index 53f1f40fb8..41b08838ff 100644 --- a/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx +++ b/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx @@ -124,7 +124,7 @@ const Installed: FC = ({ const isDifyVersionCompatible = useMemo(() => { if (!pluginDeclaration || !langeniusVersionInfo.current_version) return true return gte(langeniusVersionInfo.current_version, pluginDeclaration?.manifest.meta.minimum_dify_version ?? '0.0.0') - }, [langeniusVersionInfo.current_version, pluginDeclaration?.manifest.meta.minimum_dify_version]) + }, [langeniusVersionInfo.current_version, pluginDeclaration]) return ( <> @@ -132,7 +132,7 @@ const Installed: FC = ({

{t(`${i18nPrefix}.readyToInstall`)}

{!isDifyVersionCompatible && ( -

+

{t('plugin.difyVersionNotCompatible', { minimalDifyVersion: pluginDeclaration?.manifest.meta.minimum_dify_version })}

)} diff --git a/web/app/components/plugins/plugin-page/empty/index.tsx b/web/app/components/plugins/plugin-page/empty/index.tsx index 139567a1b5..bd1a05325d 100644 --- a/web/app/components/plugins/plugin-page/empty/index.tsx +++ b/web/app/components/plugins/plugin-page/empty/index.tsx @@ -1,4 +1,5 @@ -import React, { useMemo, useRef, useState } from 'react' +'use client' +import React, { useEffect, useMemo, useRef, useState } from 'react' import { MagicBox } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices' import { FileZip } from '@/app/components/base/icons/src/vender/solid/files' import { Github } from '@/app/components/base/icons/src/vender/solid/general' @@ -13,12 +14,18 @@ import { SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config' import { noop } from 'lodash-es' import { useGlobalPublicStore } from '@/context/global-public-context' +type InstallMethod = { + icon: React.FC<{ className?: string }> + text: string + action: string +} + const Empty = () => { const { t } = useTranslation() const fileInputRef = useRef(null) const [selectedAction, setSelectedAction] = useState(null) const [selectedFile, setSelectedFile] = useState(null) - const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures) + const { enable_marketplace, plugin_installation_permission } = useGlobalPublicStore(s => s.systemFeatures) const setActiveTab = usePluginPageContext(v => v.setActiveTab) const handleFileChange = (event: React.ChangeEvent) => { @@ -38,6 +45,22 @@ const Empty = () => { return t('plugin.list.notFound') }, [pluginList?.plugins.length, t, filters.categories.length, filters.tags.length, filters.searchQuery]) + const [installMethods, setInstallMethods] = useState([]) + useEffect(() => { + const methods = [] + if (enable_marketplace) + methods.push({ icon: MagicBox, text: t('plugin.source.marketplace'), action: 'marketplace' }) + + if (plugin_installation_permission.restrict_to_marketplace_only) { + setInstallMethods(methods) + } + else { + methods.push({ icon: Github, text: t('plugin.source.github'), action: 'github' }) + methods.push({ icon: FileZip, text: t('plugin.source.local'), action: 'local' }) + setInstallMethods(methods) + } + }, [plugin_installation_permission, enable_marketplace, t]) + return (
{/* skeleton */} @@ -70,15 +93,7 @@ const Empty = () => { accept={SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS} />
- {[ - ...( - (enable_marketplace) - ? [{ icon: MagicBox, text: t('plugin.list.source.marketplace'), action: 'marketplace' }] - : [] - ), - { icon: Github, text: t('plugin.list.source.github'), action: 'github' }, - { icon: FileZip, text: t('plugin.list.source.local'), action: 'local' }, - ].map(({ icon: Icon, text, action }) => ( + {installMethods.map(({ icon: Icon, text, action }) => (
void } + +type InstallMethod = { + icon: React.FC<{ className?: string }> + text: string + action: string +} + const InstallPluginDropdown = ({ onSwitchToMarketplaceTab, }: Props) => { @@ -30,7 +37,7 @@ const InstallPluginDropdown = ({ const [isMenuOpen, setIsMenuOpen] = useState(false) const [selectedAction, setSelectedAction] = useState(null) const [selectedFile, setSelectedFile] = useState(null) - const { enable_marketplace } = useGlobalPublicStore(s => s.systemFeatures) + const { enable_marketplace, plugin_installation_permission } = useGlobalPublicStore(s => s.systemFeatures) const handleFileChange = (event: React.ChangeEvent) => { const file = event.target.files?.[0] @@ -54,6 +61,22 @@ const InstallPluginDropdown = ({ // console.log(res) // } + const [installMethods, setInstallMethods] = useState([]) + useEffect(() => { + const methods = [] + if (enable_marketplace) + methods.push({ icon: MagicBox, text: t('plugin.source.marketplace'), action: 'marketplace' }) + + if (plugin_installation_permission.restrict_to_marketplace_only) { + setInstallMethods(methods) + } + else { + methods.push({ icon: Github, text: t('plugin.source.github'), action: 'github' }) + methods.push({ icon: FileZip, text: t('plugin.source.local'), action: 'local' }) + setInstallMethods(methods) + } + }, [plugin_installation_permission, enable_marketplace, t]) + return (
- {[ - ...( - (enable_marketplace) - ? [{ icon: MagicBox, text: t('plugin.source.marketplace'), action: 'marketplace' }] - : [] - ), - { icon: Github, text: t('plugin.source.github'), action: 'github' }, - { icon: FileZip, text: t('plugin.source.local'), action: 'local' }, - ].map(({ icon: Icon, text, action }) => ( + {installMethods.map(({ icon: Icon, text, action }) => (