feat: add permission data logic

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

@@ -1,33 +1,43 @@
 'use client'
 import type { FC } from 'react'
-import React, { useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Modal from '@/app/components/base/modal'
 import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
 import Button from '@/app/components/base/button'
-
-enum PluginManagementOption {
-  Everyone = 'Everyone',
-  Admins = 'Admins',
-  NoOne = 'No one',
-}
+import type { Permissions } from '@/app/components/plugins/types'
+import { PermissionType } from '@/app/components/plugins/types'
 
 type Props = {
-  show: boolean
+  payload: Permissions
   onHide: () => void
+  onSave: (payload: Permissions) => void
 }
 
 const PluginSettingModal: FC<Props> = ({
-  show,
+  payload,
   onHide,
+  onSave,
 }) => {
   const { t } = useTranslation()
-  const [manageOption, setManageOption] = useState<PluginManagementOption>(PluginManagementOption.Everyone)
-  const [debugOption, setDebugOption] = useState<PluginManagementOption>(PluginManagementOption.Everyone)
+  const [tempPrivilege, setTempPrivilege] = useState<Permissions>(payload)
+  const handlePrivilegeChange = useCallback((key: string) => {
+    return (value: PermissionType) => {
+      setTempPrivilege({
+        ...tempPrivilege,
+        [key]: value,
+      })
+    }
+  }, [tempPrivilege])
+
+  const handleSave = useCallback(() => {
+    onSave(tempPrivilege)
+    onHide()
+  }, [tempPrivilege])
 
   return (
     <Modal
-      isShow={show}
+      isShow
       onClose={onHide}
       closable
       className='!p-0 w-[420px]'
@@ -38,19 +48,19 @@ const PluginSettingModal: FC<Props> = ({
         </div>
         <div className='flex px-6 py-3 flex-col justify-center items-start gap-4 self-stretch'>
           {[
-            { title: 'Who can install and manage plugins?', key: 'manage', value: manageOption, setValue: setManageOption },
-            { title: 'Who can debug plugins?', key: 'debug', value: debugOption, setValue: setDebugOption },
-          ].map(({ title, key, value, setValue }) => (
+            { title: 'Who can install and manage plugins?', key: 'canInstall', value: tempPrivilege.canInstall },
+            { title: 'Who can debug plugins?', key: 'canDebugger', value: tempPrivilege.canDebugger },
+          ].map(({ title, key, value }) => (
             <div key={key} className='flex flex-col items-start gap-1 self-stretch'>
               <div className='flex m-h-6 items-center gap-0.5'>
                 <span className='text-text-secondary system-sm-semibold'>{title}</span>
               </div>
               <div className='flex items-start gap-2 justify-between w-full'>
-                {Object.values(PluginManagementOption).map(option => (
+                {[PermissionType.everyone, PermissionType.admin, PermissionType.noOne].map(option => (
                   <OptionCard
                     key={option}
                     title={option}
-                    onSelect={() => setValue(option)}
+                    onSelect={() => handlePrivilegeChange(key)(option)}
                     selected={value === option}
                     className="flex-1"
                   />
@@ -69,6 +79,7 @@ const PluginSettingModal: FC<Props> = ({
           <Button
             className='min-w-[72px]'
             variant={'primary'}
+            onClick={handleSave}
           >
             Save
           </Button>

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

@@ -3,18 +3,29 @@
 import type { ReactNode } from 'react'
 import {
   useRef,
+  useState,
 } from 'react'
 import {
   createContext,
   useContextSelector,
 } from 'use-context-selector'
+import type { Permissions } from '../types'
+import { PermissionType } from '../types'
 
 export type PluginPageContextValue = {
   containerRef: React.RefObject<HTMLDivElement>
+  permissions: Permissions
+  setPermissions: (permissions: PluginPageContextValue['permissions']) => void
+
 }
 
 export const PluginPageContext = createContext<PluginPageContextValue>({
   containerRef: { current: null },
+  permissions: {
+    canInstall: PermissionType.noOne,
+    canDebugger: PermissionType.noOne,
+  },
+  setPermissions: () => { },
 })
 
 type PluginPageContextProviderProps = {
@@ -29,11 +40,17 @@ export const PluginPageContextProvider = ({
   children,
 }: PluginPageContextProviderProps) => {
   const containerRef = useRef<HTMLDivElement>(null)
+  const [permissions, setPermissions] = useState<PluginPageContextValue['permissions']>({
+    canInstall: PermissionType.noOne,
+    canDebugger: PermissionType.noOne,
+  })
 
   return (
     <PluginPageContext.Provider
       value={{
         containerRef,
+        permissions,
+        setPermissions,
       }}
     >
       {children}

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

@@ -9,6 +9,7 @@ import {
   RiDragDropLine,
   RiEqualizer2Line,
 } from '@remixicon/react'
+import { useBoolean } from 'ahooks'
 import InstallFromLocalPackage from '../install-plugin/install-from-local-package'
 import {
   PluginPageContextProvider,
@@ -16,13 +17,14 @@ import {
 } from './context'
 import InstallPluginDropdown from './install-plugin-dropdown'
 import { useUploader } from './use-uploader'
+import usePermission from './use-permission'
 import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
-import { useModalContext } from '@/context/modal-context'
 import Button from '@/app/components/base/button'
 import TabSlider from '@/app/components/base/tab-slider'
 import ActionButton from '@/app/components/base/action-button'
 import Tooltip from '@/app/components/base/tooltip'
 import cn from '@/utils/classnames'
+import PermissionSetModal from '@/app/components/plugins/permission-setting-modal/modal'
 
 export type PluginPageProps = {
   plugins: React.ReactNode
@@ -33,7 +35,17 @@ const PluginPage = ({
   marketplace,
 }: PluginPageProps) => {
   const { t } = useTranslation()
-  const { setShowPluginSettingModal } = useModalContext() as any
+  const {
+    canInstall,
+    canDebugger,
+    canSetPermissions,
+    permissions,
+    setPermissions,
+  } = usePermission()
+  const [showPluginSettingModal, {
+    setTrue: setShowPluginSettingModal,
+    setFalse: setHidePluginSettingModal,
+  }] = useBoolean()
   const [currentFile, setCurrentFile] = useState<File | null>(null)
   const containerRef = usePluginPageContext(v => v.containerRef)
   const options = useMemo(() => {
@@ -76,7 +88,11 @@ const PluginPage = ({
             />
           </div>
           <div className='flex flex-shrink-0 items-center gap-1'>
+            {canInstall && (
               <InstallPluginDropdown />
+            )}
+            {
+              canDebugger && (
                 <Tooltip
                   triggerMethod='click'
                   popupContent={
@@ -114,14 +130,18 @@ const PluginPage = ({
                     <RiBugLine className='w-4 h-4' />
                   </Button>
                 </Tooltip>
+              )
+            }
+            {
+              canSetPermissions && (
                 <Button
                   className='w-full h-full p-2 text-components-button-secondary-text group'
-              onClick={() => {
-                setShowPluginSettingModal()
-              }}
+                  onClick={setShowPluginSettingModal}
                 >
                   <RiEqualizer2Line className='w-4 h-4' />
                 </Button>
+              )
+            }
           </div>
         </div>
       </div>
@@ -139,7 +159,7 @@ const PluginPage = ({
             <span className="system-xs-regular">Drop plugin package here to install</span>
           </div>
           {currentFile && (
-            <InstallFromLocalPackage file={currentFile} onClose={removeFile ?? (() => {})} />
+            <InstallFromLocalPackage file={currentFile} onClose={removeFile ?? (() => { })} />
           )}
           <input
             ref={fileUploader}
@@ -147,13 +167,21 @@ const PluginPage = ({
             type="file"
             id="fileUploader"
             accept='.difypkg'
-            onChange={fileChangeHandle ?? (() => {})}
+            onChange={fileChangeHandle ?? (() => { })}
           />
         </>
       )}
       {
         activeTab === 'discover' && marketplace
       }
+
+      {showPluginSettingModal && (
+        <PermissionSetModal
+          payload={permissions}
+          onHide={setHidePluginSettingModal}
+          onSave={setPermissions}
+        />
+      )}
     </div>
   )
 }

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

@@ -0,0 +1,39 @@
+import { useEffect } from 'react'
+import { PermissionType } from '../types'
+import {
+  usePluginPageContext,
+} from './context'
+import { useAppContext } from '@/context/app-context'
+
+const hasPermission = (permission: PermissionType, isAdmin: boolean) => {
+  if (permission === PermissionType.noOne)
+    return false
+
+  if (permission === PermissionType.everyone)
+    return true
+
+  return isAdmin
+}
+
+const usePermission = () => {
+  const { isCurrentWorkspaceManager, isCurrentWorkspaceOwner } = useAppContext()
+  const [permissions, setPermissions] = usePluginPageContext(v => [v.permissions, v.setPermissions])
+  const isAdmin = isCurrentWorkspaceManager || isCurrentWorkspaceOwner
+
+  useEffect(() => {
+    // TODO: fetch permissions from server
+    setPermissions({
+      canInstall: PermissionType.everyone,
+      canDebugger: PermissionType.everyone,
+    })
+  }, [])
+  return {
+    canInstall: hasPermission(permissions.canInstall, isAdmin),
+    canDebugger: hasPermission(permissions.canDebugger, isAdmin),
+    canSetPermissions: isAdmin,
+    permissions,
+    setPermissions,
+  }
+}
+
+export default usePermission

web/app/components/plugins/types.ts

@@ -25,3 +25,14 @@ export type Plugin = {
     settings: CredentialFormSchemaBase[]
   }
 }
+
+export enum PermissionType {
+  everyone = 'everyone',
+  admin = 'admin',
+  noOne = 'noOne',
+}
+
+export type Permissions = {
+  canInstall: PermissionType
+  canDebugger: PermissionType
+}

web/context/modal-context.tsx

@@ -5,7 +5,6 @@ import { useCallback, useState } from 'react'
 import { createContext, useContext, useContextSelector } from 'use-context-selector'
 import { useRouter, useSearchParams } from 'next/navigation'
 import AccountSetting from '@/app/components/header/account-setting'
-import PluginSettingModal from '@/app/components/plugins/plugin-setting/modal'
 import ApiBasedExtensionModal from '@/app/components/header/account-setting/api-based-extension-page/modal'
 import ModerationSettingModal from '@/app/components/app/configuration/toolbox/moderation/moderation-setting-modal'
 import ExternalDataToolModal from '@/app/components/app/configuration/tools/external-data-tool-modal'
@@ -52,7 +51,6 @@ export type LoadBalancingEntryModalType = ModelModalType & {
 }
 export type ModalContextState = {
   setShowAccountSettingModal: Dispatch<SetStateAction<ModalState<string> | null>>
-  setShowPluginSettingModal: () => void
   setShowApiBasedExtensionModal: Dispatch<SetStateAction<ModalState<ApiBasedExtension> | null>>
   setShowModerationSettingModal: Dispatch<SetStateAction<ModalState<ModerationConfig> | null>>
   setShowExternalDataToolModal: Dispatch<SetStateAction<ModalState<ExternalDataTool> | null>>
@@ -65,7 +63,6 @@ export type ModalContextState = {
 }
 const ModalContext = createContext<ModalContextState>({
   setShowAccountSettingModal: () => { },
-  setShowPluginSettingModal: () => { },
   setShowApiBasedExtensionModal: () => { },
   setShowModerationSettingModal: () => { },
   setShowExternalDataToolModal: () => { },
@@ -103,7 +100,6 @@ export const ModalContextProvider = ({
   const router = useRouter()
   const [showPricingModal, setShowPricingModal] = useState(searchParams.get('show-pricing') === '1')
   const [showAnnotationFullModal, setShowAnnotationFullModal] = useState(false)
-  const [showPluginSettingModal, setShowPluginSettingModal] = useState(false)
   const handleCancelAccountSettingModal = () => {
     setShowAccountSettingModal(null)
     if (showAccountSettingModal?.onCancelCallback)
@@ -197,7 +193,6 @@ export const ModalContextProvider = ({
   return (
     <ModalContext.Provider value={{
       setShowAccountSettingModal,
-      setShowPluginSettingModal: () => setShowPluginSettingModal(true),
       setShowApiBasedExtensionModal,
       setShowModerationSettingModal,
       setShowExternalDataToolModal,
@@ -219,15 +214,6 @@ export const ModalContextProvider = ({
           )
         }
 
-        {
-          !!showPluginSettingModal && (
-            <PluginSettingModal
-              show={showPluginSettingModal}
-              onHide={() => setShowPluginSettingModal(false)}
-            />
-          )
-        }
-
         {
           !!showApiBasedExtensionModal && (
             <ApiBasedExtensionModal