feat: plugin permission

web/app/components/plugins/permission-setting-modal/modal.tsx

@@ -31,8 +31,8 @@ const PluginSettingModal: FC<Props> = ({
     }
   }, [tempPrivilege])
 
-  const handleSave = useCallback(() => {
-    onSave(tempPrivilege)
+  const handleSave = useCallback(async () => {
+    await onSave(tempPrivilege)
     onHide()
   }, [tempPrivilege])
 
@@ -49,8 +49,8 @@ const PluginSettingModal: FC<Props> = ({
         </div>
         <div className='flex px-6 py-3 flex-col justify-center items-start gap-4 self-stretch'>
           {[
-            { title: t(`${i18nPrefix}.whoCanInstall`), key: 'canManagement', value: tempPrivilege.canManagement },
-            { title: t(`${i18nPrefix}.whoCanDebug`), key: 'canDebugger', value: tempPrivilege.canDebugger },
+            { title: t(`${i18nPrefix}.whoCanInstall`), key: 'install_permission', value: tempPrivilege.install_permission },
+            { title: t(`${i18nPrefix}.whoCanDebug`), key: 'debug_permission', value: tempPrivilege.debug_permission },
           ].map(({ title, key, value }) => (
             <div key={key} className='flex flex-col items-start gap-1 self-stretch'>
               <div className='flex h-6 items-center gap-0.5'>

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

@@ -22,8 +22,8 @@ export type PluginPageContextValue = {
 export const PluginPageContext = createContext<PluginPageContextValue>({
   containerRef: { current: null },
   permissions: {
-    canManagement: PermissionType.noOne,
-    canDebugger: PermissionType.noOne,
+    install_permission: PermissionType.noOne,
+    debug_permission: PermissionType.noOne,
   },
   setPermissions: () => { },
 })
@@ -41,8 +41,8 @@ export const PluginPageContextProvider = ({
 }: PluginPageContextProviderProps) => {
   const containerRef = useRef<HTMLDivElement>(null)
   const [permissions, setPermissions] = useState<PluginPageContextValue['permissions']>({
-    canManagement: PermissionType.noOne,
-    canDebugger: PermissionType.noOne,
+    install_permission: PermissionType.noOne,
+    debug_permission: PermissionType.noOne,
   })
 
   return (

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

@@ -1,9 +1,13 @@
 import { useEffect } from 'react'
+import type { Permissions } from '../types'
 import { PermissionType } from '../types'
 import {
   usePluginPageContext,
 } from './context'
 import { useAppContext } from '@/context/app-context'
+import { updatePermission as doUpdatePermission, fetchPermission } from '@/service/plugins'
+import Toast from '../../base/toast'
+import { useTranslation } from 'react-i18next'
 
 const hasPermission = (permission: PermissionType, isAdmin: boolean) => {
   if (permission === PermissionType.noOne)
@@ -16,23 +20,31 @@ const hasPermission = (permission: PermissionType, isAdmin: boolean) => {
 }
 
 const usePermission = () => {
+  const { t } = useTranslation()
   const { isCurrentWorkspaceManager, isCurrentWorkspaceOwner } = useAppContext()
   const [permissions, setPermissions] = usePluginPageContext(v => [v.permissions, v.setPermissions])
   const isAdmin = isCurrentWorkspaceManager || isCurrentWorkspaceOwner
 
-  useEffect(() => {
-    // TODO: fetch permissions from server
-    setPermissions({
-      canManagement: PermissionType.everyone,
-      canDebugger: PermissionType.everyone,
+  const updatePermission = async (permission: Permissions) => {
+    await doUpdatePermission(permission)
+    setPermissions(permission)
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
     })
+  }
+  useEffect(() => {
+    (async () => {
+      const permission = await fetchPermission()
+      setPermissions(permission)
+    })()
   }, [])
   return {
-    canManagement: hasPermission(permissions.canManagement, isAdmin),
-    canDebugger: hasPermission(permissions.canDebugger, isAdmin),
+    canManagement: hasPermission(permissions.install_permission, isAdmin),
+    canDebugger: hasPermission(permissions.debug_permission, isAdmin),
     canSetPermissions: isAdmin,
     permissions,
-    setPermissions,
+    setPermissions: updatePermission,
   }
 }
 

web/app/components/plugins/types.ts

@@ -121,13 +121,13 @@ export type Plugin = {
 
 export enum PermissionType {
   everyone = 'everyone',
-  admin = 'admin',
-  noOne = 'noOne',
+  admin = 'admins',
+  noOne = 'noone',
 }
 
 export type Permissions = {
-  canManagement: PermissionType
-  canDebugger: PermissionType
+  install_permission: PermissionType
+  debug_permission: PermissionType
 }
 
 export enum InstallStepFromGitHub {

web/i18n/en-US/plugin.ts

@@ -42,8 +42,8 @@ const translation = {
     whoCanInstall: 'Who can install and manage plugins?',
     whoCanDebug: 'Who can debug plugins?',
     everyone: 'Everyone',
-    admin: 'Admins',
-    noOne: 'No one',
+    admins: 'Admins',
+    noone: 'No one',
   },
   pluginInfoModal: {
     title: 'Plugin info',

web/i18n/zh-Hans/plugin.ts

@@ -42,8 +42,8 @@ const translation = {
     whoCanInstall: '谁可以安装和管理插件？',
     whoCanDebug: '谁可以调试插件？',
     everyone: '所有人',
-    admin: '管理员',
-    noOne: '无人',
+    admins: '管理员',
+    noone: '无人',
   },
   pluginInfoModal: {
     title: '插件信息',

web/service/plugins.ts

@@ -6,6 +6,7 @@ import type {
   EndpointsRequest,
   EndpointsResponse,
   InstallPackageResponse,
+  Permissions,
   PluginDeclaration,
   PluginManifestInMarket,
   TaskStatusResponse,
@@ -101,3 +102,11 @@ export const fetchMarketplaceCollectionPlugins: Fetcher<MarketplaceCollectionPlu
 export const checkTaskStatus = async (taskId: string) => {
   return get<TaskStatusResponse>(`/workspaces/current/plugin/tasks/${taskId}`)
 }
+
+export const fetchPermission = async () => {
+  return get<Permissions>('/workspaces/current/plugin/permission/fetch')
+}
+
+export const updatePermission = async (permissions: Permissions) => {
+  return post('/workspaces/current/plugin/permission/change', { body: permissions })
+}