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,52 +88,60 @@ const PluginPage = ({
             />
           </div>
           <div className='flex flex-shrink-0 items-center gap-1'>
-            <InstallPluginDropdown />
-            <Tooltip
-              triggerMethod='click'
-              popupContent={
-                <>
-                  <div className='flex items-center gap-1 self-stretch'>
-                    <span className='flex flex-col justify-center items-start flex-grow flex-shrink-0 basis-0 text-text-secondary system-sm-semibold'>Debugging</span>
-                    <div className='flex items-center gap-0.5 text-text-accent-light-mode-only cursor-pointer'>
-                      <span className='system-xs-medium'>View docs</span>
-                      <RiArrowRightUpLine className='w-3 h-3' />
-                    </div>
-                  </div>
-                  <div className='flex flex-col items-start gap-0.5 self-stretch'>
-                    {['Port', 'Key'].map((label, index) => (
-                      <div key={label} className='flex items-center gap-1 self-stretch'>
-                        <span className='flex w-10 flex-col justify-center items-start text-text-tertiary system-xs-medium'>{label}</span>
-                        <div className='flex justify-center items-center gap-0.5'>
-                          <span className='system-xs-medium text-text-secondary'>
-                            {index === 0 ? 'cloud.dify,ai:2048' : 'A1B2C3D4E5F6G7H8'}
-                          </span>
-                          <ActionButton>
-                            <RiClipboardLine className='w-3.5 h-3.5 text-text-tertiary' />
-                          </ActionButton>
+            {canInstall && (
+              <InstallPluginDropdown />
+            )}
+            {
+              canDebugger && (
+                <Tooltip
+                  triggerMethod='click'
+                  popupContent={
+                    <>
+                      <div className='flex items-center gap-1 self-stretch'>
+                        <span className='flex flex-col justify-center items-start flex-grow flex-shrink-0 basis-0 text-text-secondary system-sm-semibold'>Debugging</span>
+                        <div className='flex items-center gap-0.5 text-text-accent-light-mode-only cursor-pointer'>
+                          <span className='system-xs-medium'>View docs</span>
+                          <RiArrowRightUpLine className='w-3 h-3' />
                         </div>
                       </div>
-                    ))}
-                  </div>
-                </>
-              }
-              popupClassName='flex flex-col items-start w-[256px] px-4 py-3.5 gap-1 border border-components-panel-border
-                rounded-xl bg-components-tooltip-bg shadows-shadow-lg z-50'
-              asChild={false}
-              position='bottom'
-            >
-              <Button className='w-full h-full p-2 text-components-button-secondary-text'>
-                <RiBugLine className='w-4 h-4' />
-              </Button>
-            </Tooltip>
-            <Button
-              className='w-full h-full p-2 text-components-button-secondary-text group'
-              onClick={() => {
-                setShowPluginSettingModal()
-              }}
-            >
-              <RiEqualizer2Line className='w-4 h-4' />
-            </Button>
+                      <div className='flex flex-col items-start gap-0.5 self-stretch'>
+                        {['Port', 'Key'].map((label, index) => (
+                          <div key={label} className='flex items-center gap-1 self-stretch'>
+                            <span className='flex w-10 flex-col justify-center items-start text-text-tertiary system-xs-medium'>{label}</span>
+                            <div className='flex justify-center items-center gap-0.5'>
+                              <span className='system-xs-medium text-text-secondary'>
+                                {index === 0 ? 'cloud.dify,ai:2048' : 'A1B2C3D4E5F6G7H8'}
+                              </span>
+                              <ActionButton>
+                                <RiClipboardLine className='w-3.5 h-3.5 text-text-tertiary' />
+                              </ActionButton>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </>
+                  }
+                  popupClassName='flex flex-col items-start w-[256px] px-4 py-3.5 gap-1 border border-components-panel-border
+                    rounded-xl bg-components-tooltip-bg shadows-shadow-lg z-50'
+                  asChild={false}
+                  position='bottom'
+                >
+                  <Button className='w-full h-full p-2 text-components-button-secondary-text'>
+                    <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}
+                >
+                  <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