fix: install plugins permissions (#18870)

web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx

@@ -8,6 +8,7 @@ import { useTranslation } from 'react-i18next'
 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'
 const i18nPrefix = 'plugin.installModal'
 
 type Props = {
@@ -74,6 +75,7 @@ const Install: FC<Props> = ({
       installedInfo: installedInfo!,
     })
   }
+  const { canInstallPluginFromMarketplace } = useCanInstallPluginFromMarketplace()
   return (
     <>
       <div className='flex flex-col items-start justify-center gap-4 self-stretch px-6 py-3'>
@@ -101,7 +103,7 @@ const Install: FC<Props> = ({
           <Button
             variant='primary'
             className='flex min-w-[72px] space-x-0.5'
-            disabled={!canInstall || isInstalling || selectedPlugins.length === 0}
+            disabled={!canInstall || isInstalling || selectedPlugins.length === 0 || !canInstallPluginFromMarketplace}
             onClick={handleInstall}
           >
             {isInstalling && <RiLoader2Line className='h-4 w-4 animate-spin-slow' />}

web/app/components/plugins/plugin-page/index.tsx

@@ -144,10 +144,18 @@ const PluginPage = ({
     return activeTab === PLUGIN_PAGE_TABS_MAP.marketplace || values.includes(activeTab)
   }, [activeTab])
 
+  const handleFileChange = (file: File | null) => {
+    if (!file || !file.name.endsWith('.difypkg')) {
+      setCurrentFile(null)
+      return
+    }
+
+    setCurrentFile(file)
+  }
   const uploaderProps = useUploader({
-    onFileChange: setCurrentFile,
+    onFileChange: handleFileChange,
     containerRef,
-    enabled: isPluginsTab,
+    enabled: isPluginsTab && canManagement,
   })
 
   const { dragging, fileUploader, fileChangeHandle, removeFile } = uploaderProps

web/app/components/plugins/plugin-page/use-permission.ts

@@ -3,6 +3,8 @@ import { useAppContext } from '@/context/app-context'
 import Toast from '../../base/toast'
 import { useTranslation } from 'react-i18next'
 import { useInvalidatePermissions, useMutationPermissions, usePermissions } from '@/service/use-plugins'
+import { useSelector as useAppContextSelector } from '@/context/app-context'
+import { useMemo } from 'react'
 
 const hasPermission = (permission: PermissionType | undefined, isAdmin: boolean) => {
   if (!permission)
@@ -43,4 +45,17 @@ const usePermission = () => {
   }
 }
 
+export const useCanInstallPluginFromMarketplace = () => {
+  const { enable_marketplace } = useAppContextSelector(s => s.systemFeatures)
+  const { canManagement } = usePermission()
+
+  const canInstallPluginFromMarketplace = useMemo(() => {
+    return enable_marketplace && canManagement
+  }, [enable_marketplace, canManagement])
+
+  return {
+    canInstallPluginFromMarketplace,
+  }
+}
+
 export default usePermission