mirror of
https://github.com/langgenius/dify.git
synced 2026-05-05 18:08:07 +08:00
feat: add permission data logic
This commit is contained in:
Joel
@ -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}
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
39
web/app/components/plugins/plugin-page/use-permission.ts
Normal file
39
web/app/components/plugins/plugin-page/use-permission.ts
Normal file
@ -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
|
||||
Reference in New Issue
Block a user