Feat: add check before install plugin (#20014)

2025-06-18 15:51:23 +08:00
parent 83719cab73
commit 614c5e087e
30 changed files with 337 additions and 135 deletions
--- a/web/app/components/plugins/install-plugin/hooks/use-install-plugin-limit.tsx
+++ b/web/app/components/plugins/install-plugin/hooks/use-install-plugin-limit.tsx
@@ -0,0 +1,46 @@
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import type { SystemFeatures } from '@/types/feature'
+import { InstallationScope } from '@/types/feature'
+import type { Plugin, PluginManifestInMarket } from '../../types'
+
+type PluginProps = (Plugin | PluginManifestInMarket) & { from: 'github' | 'marketplace' | 'package' }
+
+export function pluginInstallLimit(plugin: PluginProps, systemFeatures: SystemFeatures) {
+  if (systemFeatures.plugin_installation_permission.restrict_to_marketplace_only) {
+    if (plugin.from === 'github' || plugin.from === 'package')
+      return { canInstall: false }
+  }
+
+  if (systemFeatures.plugin_installation_permission.plugin_installation_scope === InstallationScope.ALL) {
+    return {
+      canInstall: true,
+    }
+  }
+  if (systemFeatures.plugin_installation_permission.plugin_installation_scope === InstallationScope.NONE) {
+    return {
+      canInstall: false,
+    }
+  }
+  const verification = plugin.verification || {}
+  if (!plugin.verification || !plugin.verification.authorized_category)
+    verification.authorized_category = 'langgenius'
+
+  if (systemFeatures.plugin_installation_permission.plugin_installation_scope === InstallationScope.OFFICIAL_ONLY) {
+    return {
+      canInstall: verification.authorized_category === 'langgenius',
+    }
+  }
+  if (systemFeatures.plugin_installation_permission.plugin_installation_scope === InstallationScope.OFFICIAL_AND_PARTNER) {
+    return {
+      canInstall: verification.authorized_category === 'langgenius' || verification.authorized_category === 'partner',
+    }
+  }
+  return {
+    canInstall: true,
+  }
+}
+
+export default function usePluginInstallLimit(plugin: PluginProps) {
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
+  return pluginInstallLimit(plugin, systemFeatures)
+}
--- a/web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx
@@ -39,7 +39,7 @@ const Item: FC<Props> = ({
        plugin_id: data.unique_identifier,
      }
      onFetchedPayload(payload)
-      setPayload(payload)
+      setPayload({ ...payload, from: dependency.type })
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data])
--- a/web/app/components/plugins/install-plugin/install-bundle/item/loaded-item.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/item/loaded-item.tsx
@@ -8,6 +8,7 @@ import useGetIcon from '../../base/use-get-icon'
 import { MARKETPLACE_API_PREFIX } from '@/config'
 import Version from '../../base/version'
 import type { VersionProps } from '../../../types'
+import usePluginInstallLimit from '../../hooks/use-install-plugin-limit'

 type Props = {
  checked: boolean
@@ -29,9 +30,11 @@ const LoadedItem: FC<Props> = ({
    ...particleVersionInfo,
    toInstallVersion: payload.version,
  }
+  const { canInstall } = usePluginInstallLimit(payload)
  return (
    <div className='flex items-center space-x-2'>
      <Checkbox
+        disabled={!canInstall}
        className='shrink-0'
        checked={checked}
        onCheck={() => onCheckedChange(payload)}
@@ -43,6 +46,7 @@ const LoadedItem: FC<Props> = ({
          icon: isFromMarketPlace ? `${MARKETPLACE_API_PREFIX}/plugins/${payload.org}/${payload.name}/icon` : getIconUrl(payload.icon),
        }}
        titleLeft={payload.version ? <Version {...versionInfo} /> : null}
+        limitedInstall={!canInstall}
      />
    </div>
  )
--- a/web/app/components/plugins/install-plugin/install-bundle/item/package-item.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/item/package-item.tsx
@@ -29,7 +29,7 @@ const PackageItem: FC<Props> = ({
  const plugin = pluginManifestToCardPluginProps(payload.value.manifest)
  return (
    <LoadedItem
-      payload={plugin}
+      payload={{ ...plugin, from: payload.type }}
      checked={checked}
      onCheckedChange={onCheckedChange}
      isFromMarketPlace={isFromMarketPlace}
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/install-multi.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/install-multi.tsx
@@ -1,5 +1,6 @@
 'use client'
-import type { FC } from 'react'
+import type { ForwardRefRenderFunction } from 'react'
+import { useImperativeHandle } from 'react'
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import type { Dependency, GitHubItemAndMarketPlaceDependency, PackageDependency, Plugin, VersionInfo } from '../../../types'
 import MarketplaceItem from '../item/marketplace-item'
@@ -9,22 +10,34 @@ import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use
 import produce from 'immer'
 import PackageItem from '../item/package-item'
 import LoadingError from '../../base/loading-error'
+import { useGlobalPublicStore } from '@/context/global-public-context'
+import { pluginInstallLimit } from '../../hooks/use-install-plugin-limit'

 type Props = {
  allPlugins: Dependency[]
  selectedPlugins: Plugin[]
-  onSelect: (plugin: Plugin, selectedIndex: number) => void
+  onSelect: (plugin: Plugin, selectedIndex: number, allCanInstallPluginsLength: number) => void
+  onSelectAll: (plugins: Plugin[], selectedIndexes: number[]) => void
+  onDeSelectAll: () => void
  onLoadedAllPlugin: (installedInfo: Record<string, VersionInfo>) => void
  isFromMarketPlace?: boolean
 }

-const InstallByDSLList: FC<Props> = ({
+export type ExposeRefs = {
+  selectAllPlugins: () => void
+  deSelectAllPlugins: () => void
+}
+
+const InstallByDSLList: ForwardRefRenderFunction<ExposeRefs, Props> = ({
  allPlugins,
  selectedPlugins,
  onSelect,
+  onSelectAll,
+  onDeSelectAll,
  onLoadedAllPlugin,
  isFromMarketPlace,
-}) => {
+}, ref) => {
+  const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
  // DSL has id, to get plugin info to show more info
  const { isLoading: isFetchingMarketplaceDataById, data: infoGetById, error: infoByIdError } = useFetchPluginsInMarketPlaceByInfo(allPlugins.filter(d => d.type === 'marketplace').map((d) => {
    const dependecy = (d as GitHubItemAndMarketPlaceDependency).value
@@ -97,7 +110,8 @@ const InstallByDSLList: FC<Props> = ({
      const sortedList = allPlugins.filter(d => d.type === 'marketplace').map((d) => {
        const p = d as GitHubItemAndMarketPlaceDependency
        const id = p.value.marketplace_plugin_unique_identifier?.split(':')[0]
-        return infoGetById.data.list.find(item => item.plugin.plugin_id === id)?.plugin
+        const retPluginInfo = infoGetById.data.list.find(item => item.plugin.plugin_id === id)?.plugin
+        return { ...retPluginInfo, from: d.type } as Plugin
      })
      const payloads = sortedList
      const failedIndex: number[] = []
@@ -106,7 +120,7 @@ const InstallByDSLList: FC<Props> = ({
          if (payloads[i]) {
            draft[index] = {
              ...payloads[i],
-              version: payloads[i].version || payloads[i].latest_version,
+              version: payloads[i]!.version || payloads[i]!.latest_version,
            }
          }
          else { failedIndex.push(index) }
@@ -181,9 +195,35 @@ const InstallByDSLList: FC<Props> = ({

  const handleSelect = useCallback((index: number) => {
    return () => {
-      onSelect(plugins[index]!, index)
+      const canSelectPlugins = plugins.filter((p) => {
+        const { canInstall } = pluginInstallLimit(p!, systemFeatures)
+        return canInstall
+      })
+      onSelect(plugins[index]!, index, canSelectPlugins.length)
    }
-  }, [onSelect, plugins])
+  }, [onSelect, plugins, systemFeatures])
+
+  useImperativeHandle(ref, () => ({
+    selectAllPlugins: () => {
+      const selectedIndexes: number[] = []
+      const selectedPlugins: Plugin[] = []
+      allPlugins.forEach((d, index) => {
+        const p = plugins[index]
+        if (!p)
+          return
+        const { canInstall } = pluginInstallLimit(p, systemFeatures)
+        if (canInstall) {
+          selectedIndexes.push(index)
+          selectedPlugins.push(p)
+        }
+      })
+      onSelectAll(selectedPlugins, selectedIndexes)
+    },
+    deSelectAllPlugins: () => {
+      onDeSelectAll()
+    },
+  }))
+
  return (
    <>
      {allPlugins.map((d, index) => {
@@ -211,7 +251,7 @@ const InstallByDSLList: FC<Props> = ({
              key={index}
              checked={!!selectedPlugins.find(p => p.plugin_id === plugins[index]?.plugin_id)}
              onCheckedChange={handleSelect(index)}
-              payload={plugin}
+              payload={{ ...plugin, from: d.type } as Plugin}
              version={(d as GitHubItemAndMarketPlaceDependency).value.version! || plugin?.version || ''}
              versionInfo={getVersionInfo(`${plugin?.org || plugin?.author}/${plugin?.name}`)}
            />
@@ -234,4 +274,4 @@ const InstallByDSLList: FC<Props> = ({
    </>
  )
 }
-export default React.memo(InstallByDSLList)
+export default React.forwardRef(InstallByDSLList)
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
@@ -1,15 +1,18 @@
 'use client'
 import type { FC } from 'react'
+import { useRef } from 'react'
 import React, { useCallback, useState } from 'react'
 import type { Dependency, InstallStatusResponse, Plugin, VersionInfo } from '../../../types'
 import Button from '@/app/components/base/button'
 import { RiLoader2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
+import type { ExposeRefs } from './install-multi'
 import InstallMulti from './install-multi'
 import { useInstallOrUpdate } from '@/service/use-plugins'
 import useRefreshPluginList from '../../hooks/use-refresh-plugin-list'
 import { useCanInstallPluginFromMarketplace } from '@/app/components/plugins/plugin-page/use-permission'
 import { useMittContextSelector } from '@/context/mitt-context'
+import Checkbox from '@/app/components/base/checkbox'
 const i18nPrefix = 'plugin.installModal'

 type Props = {
@@ -34,18 +37,8 @@ const Install: FC<Props> = ({
  const [selectedPlugins, setSelectedPlugins] = React.useState<Plugin[]>([])
  const [selectedIndexes, setSelectedIndexes] = React.useState<number[]>([])
  const selectedPluginsNum = selectedPlugins.length
+  const installMultiRef = useRef<ExposeRefs>(null)
  const { refreshPluginList } = useRefreshPluginList()
-  const handleSelect = (plugin: Plugin, selectedIndex: number) => {
-    const isSelected = !!selectedPlugins.find(p => p.plugin_id === plugin.plugin_id)
-    let nextSelectedPlugins
-    if (isSelected)
-      nextSelectedPlugins = selectedPlugins.filter(p => p.plugin_id !== plugin.plugin_id)
-    else
-      nextSelectedPlugins = [...selectedPlugins, plugin]
-    setSelectedPlugins(nextSelectedPlugins)
-    const nextSelectedIndexes = isSelected ? selectedIndexes.filter(i => i !== selectedIndex) : [...selectedIndexes, selectedIndex]
-    setSelectedIndexes(nextSelectedIndexes)
-  }

  const [canInstall, setCanInstall] = React.useState(false)
  const [installedInfo, setInstalledInfo] = useState<Record<string, VersionInfo> | undefined>(undefined)
@@ -81,6 +74,51 @@ const Install: FC<Props> = ({
      installedInfo: installedInfo!,
    })
  }
+  const [isSelectAll, setIsSelectAll] = useState(false)
+  const [isIndeterminate, setIsIndeterminate] = useState(false)
+  const handleClickSelectAll = useCallback(() => {
+    if (isSelectAll)
+      installMultiRef.current?.deSelectAllPlugins()
+    else
+      installMultiRef.current?.selectAllPlugins()
+  }, [isSelectAll])
+  const handleSelectAll = useCallback((plugins: Plugin[], selectedIndexes: number[]) => {
+    setSelectedPlugins(plugins)
+    setSelectedIndexes(selectedIndexes)
+    setIsSelectAll(true)
+    setIsIndeterminate(false)
+  }, [])
+  const handleDeSelectAll = useCallback(() => {
+    setSelectedPlugins([])
+    setSelectedIndexes([])
+    setIsSelectAll(false)
+    setIsIndeterminate(false)
+  }, [])
+
+  const handleSelect = useCallback((plugin: Plugin, selectedIndex: number, allPluginsLength: number) => {
+    const isSelected = !!selectedPlugins.find(p => p.plugin_id === plugin.plugin_id)
+    let nextSelectedPlugins
+    if (isSelected)
+      nextSelectedPlugins = selectedPlugins.filter(p => p.plugin_id !== plugin.plugin_id)
+    else
+      nextSelectedPlugins = [...selectedPlugins, plugin]
+    setSelectedPlugins(nextSelectedPlugins)
+    const nextSelectedIndexes = isSelected ? selectedIndexes.filter(i => i !== selectedIndex) : [...selectedIndexes, selectedIndex]
+    setSelectedIndexes(nextSelectedIndexes)
+    if (nextSelectedPlugins.length === 0) {
+      setIsSelectAll(false)
+      setIsIndeterminate(false)
+    }
+    else if (nextSelectedPlugins.length === allPluginsLength) {
+      setIsSelectAll(true)
+      setIsIndeterminate(false)
+    }
+    else {
+      setIsIndeterminate(true)
+      setIsSelectAll(false)
+    }
+  }, [selectedPlugins, selectedIndexes])
+
  const { canInstallPluginFromMarketplace } = useCanInstallPluginFromMarketplace()
  return (
    <>
@@ -90,9 +128,12 @@ const Install: FC<Props> = ({
        </div>
        <div className='w-full space-y-1 rounded-2xl bg-background-section-burn p-2'>
          <InstallMulti
+            ref={installMultiRef}
            allPlugins={allPlugins}
            selectedPlugins={selectedPlugins}
            onSelect={handleSelect}
+            onSelectAll={handleSelectAll}
+            onDeSelectAll={handleDeSelectAll}
            onLoadedAllPlugin={handleLoadedAllPlugin}
            isFromMarketPlace={isFromMarketPlace}
          />
@@ -100,21 +141,29 @@ const Install: FC<Props> = ({
      </div>
      {/* Action Buttons */}
      {!isHideButton && (
-        <div className='flex items-center justify-end gap-2 self-stretch p-6 pt-5'>
-          {!canInstall && (
-            <Button variant='secondary' className='min-w-[72px]' onClick={onCancel}>
-              {t('common.operation.cancel')}
+        <div className='flex items-center justify-between gap-2 self-stretch p-6 pt-5'>
+          <div className='px-2'>
+            {canInstall && <div className='flex items-center gap-x-2' onClick={handleClickSelectAll}>
+              <Checkbox checked={isSelectAll} indeterminate={isIndeterminate} />
+              <p className='system-sm-medium cursor-pointer text-text-secondary'>{isSelectAll ? t('common.operation.deSelectAll') : t('common.operation.selectAll')}</p>
+            </div>}
+          </div>
+          <div className='flex items-center justify-end gap-2 self-stretch'>
+            {!canInstall && (
+              <Button variant='secondary' className='min-w-[72px]' onClick={onCancel}>
+                {t('common.operation.cancel')}
+              </Button>
+            )}
+            <Button
+              variant='primary'
+              className='flex min-w-[72px] space-x-0.5'
+              disabled={!canInstall || isInstalling || selectedPlugins.length === 0 || !canInstallPluginFromMarketplace}
+              onClick={handleInstall}
+            >
+              {isInstalling && <RiLoader2Line className='h-4 w-4 animate-spin-slow' />}
+              <span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
            </Button>
-          )}
-          <Button
-            variant='primary'
-            className='flex min-w-[72px] space-x-0.5'
-            disabled={!canInstall || isInstalling || selectedPlugins.length === 0 || !canInstallPluginFromMarketplace}
-            onClick={handleInstall}
-          >
-            {isInstalling && <RiLoader2Line className='h-4 w-4 animate-spin-slow' />}
-            <span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
-          </Button>
+          </div>
        </div>
      )}

--- a/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx
@@ -124,7 +124,7 @@ const Installed: FC<Props> = ({
            />
          </p>
          {!isDifyVersionCompatible && (
-            <p className='system-md-regular flex items-center gap-1 text-text-secondary text-text-warning'>
+            <p className='system-md-regular flex items-center gap-1 text-text-warning'>
              {t('plugin.difyVersionNotCompatible', { minimalDifyVersion: payload.meta.minimum_dify_version })}
            </p>
          )}
--- 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
@@ -15,6 +15,7 @@ import Version from '../../base/version'
 import { usePluginTaskList } from '@/service/use-plugins'
 import { gte } from 'semver'
 import { useAppContext } from '@/context/app-context'
+import useInstallPluginLimit from '../../hooks/use-install-plugin-limit'

 const i18nPrefix = 'plugin.installModal'

@@ -124,15 +125,16 @@ const Installed: FC<Props> = ({
  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])

+  const { canInstall } = useInstallPluginLimit({ ...payload, from: 'marketplace' })
  return (
    <>
      <div className='flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3'>
        <div className='system-md-regular text-text-secondary'>
          <p>{t(`${i18nPrefix}.readyToInstall`)}</p>
          {!isDifyVersionCompatible && (
-            <p className='system-md-regular text-text-secondary text-text-warning'>
+            <p className='system-md-regular text-text-warning'>
              {t('plugin.difyVersionNotCompatible', { minimalDifyVersion: pluginDeclaration?.manifest.meta.minimum_dify_version })}
            </p>
          )}
@@ -146,6 +148,7 @@ const Installed: FC<Props> = ({
              installedVersion={installedVersion}
              toInstallVersion={toInstallVersion}
            />}
+            limitedInstall={!canInstall}
          />
        </div>
      </div>
@@ -159,7 +162,7 @@ const Installed: FC<Props> = ({
        <Button
          variant='primary'
          className='flex min-w-[72px] space-x-0.5'
-          disabled={isInstalling || isLoading}
+          disabled={isInstalling || isLoading || !canInstall}
          onClick={handleInstall}
        >
          {isInstalling && <RiLoader2Line className='h-4 w-4 animate-spin-slow' />}
--- a/web/app/components/plugins/install-plugin/utils.ts
+++ b/web/app/components/plugins/install-plugin/utils.ts
@@ -1,5 +1,6 @@
 import type { Plugin, PluginDeclaration, PluginManifestInMarket } from '../types'
 import type { GitHubUrlInfo } from '@/app/components/plugins/types'
+import { isEmpty } from 'lodash-es'

 export const pluginManifestToCardPluginProps = (pluginManifest: PluginDeclaration): Plugin => {
  return {
@@ -47,6 +48,7 @@ export const pluginManifestInMarketToPluginProps = (pluginManifest: PluginManife
    },
    tags: [],
    badges: pluginManifest.badges,
+    verification: isEmpty(pluginManifest.verification) ? { authorized_category: 'langgenius' } : pluginManifest.verification,
  }
 }