ngskcloud
/
gcgj-dify-1.7.0
17
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: check user permission before publish web app

Browse Source
pull/18656/head
NFish 1 year ago
parent 5bfc2456f2
commit 080776c516
4 changed files with 117 additions and 52 deletions
Show Stats Download Patch File Download Diff File

71
web/app/components/app/app-publisher/index.tsx
Unescape Escape View File

@ -1,13 +1,17 @@
import {
memo,
useCallback,
useEffect,
useState,
} from 'react'
import { useTranslation } from 'react-i18next'
import dayjs from 'dayjs'
import { RiArrowDownSLine, RiPlanetLine } from '@remixicon/react'
import { RiArrowDownSLine, RiArrowRightSLine, RiLockLine, RiPlanetLine } from '@remixicon/react'
import Toast from '../../base/toast'
import type { ModelAndParameter } from '../configuration/debug/types'
import Divider from '../../base/divider'
import AccessControl from '../app-access-control'
import Loading from '../../base/loading'
import SuggestedAction from './suggested-action'
import PublishWithMultipleModel from './publish-with-multiple-model'
import Button from '@/app/components/base/button'
@ -27,6 +31,9 @@ import { FileText } from '@/app/components/base/icons/src/vender/line/files'
import WorkflowToolConfigureButton from '@/app/components/tools/workflow-tool/configure-button'
import type { InputVar } from '@/app/components/workflow/types'
import { appDefaultIconBackground } from '@/config'
import { useAppWhiteListSubjects, useGetAppAccessMode, useGetUserCanAccessApp } from '@/service/access-control'
import { AccessMode } from '@/models/access-control'
import { fetchAppDetail } from '@/service/apps'
export type AppPublisherProps = {
disabled?: boolean
@ -65,10 +72,27 @@ const AppPublisher = ({
const [published, setPublished] = useState(false)
const [open, setOpen] = useState(false)
const appDetail = useAppStore(state => state.appDetail)
const setAppDetail = useAppStore(s => s.setAppDetail)
const { app_base_url: appBaseURL = '', access_token: accessToken = '' } = appDetail?.site ?? {}
const appMode = (appDetail?.mode !== 'completion' && appDetail?.mode !== 'workflow') ? 'chat' : appDetail.mode
const appURL = `${appBaseURL}/${appMode}/${accessToken}`
const { data: appAccessMode, isPending: isGettingAppAccessMode } = useGetAppAccessMode({ appId: appDetail?.id })
const { data: useCanAccessApp, isPending: isGettingUserCanAccessApp } = useGetUserCanAccessApp({ appId: appDetail?.id })
const { data: appAccessSubjects, isPending: isGettingAppWhiteListSubjects } = useAppWhiteListSubjects(appDetail?.id, open)
const [showAppAccessControl, setShowAppAccessControl] = useState(false)
const [isAppAccessSet, setIsAppAccessSet] = useState(false)
useEffect(() => {
if (appAccessMode && appAccessSubjects) {
if (appAccessMode.accessMode === AccessMode.SPECIFIC_GROUPS_MEMBERS && appAccessSubjects.groups?.length > 0 && appAccessSubjects.members?.length > 0)
setIsAppAccessSet(false)
else
setIsAppAccessSet(true)
}
else {
setIsAppAccessSet(false)
}
}, [appAccessSubjects, appAccessMode])
const language = useGetLanguage()
const formatTimeFromNow = useCallback((time: number) => {
return dayjs(time).locale(language === 'zh_Hans' ? 'zh-cn' : language.replace('_', '-')).fromNow()
@ -120,6 +144,13 @@ const AppPublisher = ({
}
}, [appDetail?.id])
const handleAccessControlUpdate = useCallback(() => {
fetchAppDetail({ url: '/apps', id: appDetail!.id }).then((res) => {
setAppDetail(res)
setShowAppAccessControl(false)
})
}, [appDetail, setAppDetail])
const [embeddingModalOpen, setEmbeddingModalOpen] = useState(false)
return (
@ -196,12 +227,36 @@ const AppPublisher = ({
)
}
</div>
{(isGettingAppAccessMode || isGettingUserCanAccessApp || isGettingAppWhiteListSubjects)
? <div><Loading /></div>
: <>
<Divider />
<div className='p-4 pt-3'>
<div className='flex items-center h-6'>
<p className='system-xs-medium text-text-tertiary'>{t('app.publishApp.title')}</p>
</div>
<div className='h-8 flex items-center pl-2.5 pr-2 py-1 gap-x-0.5 rounded-lg bg-components-input-bg-normal hover:bg-primary-50 hover:text-text-accent cursor-pointer'
onClick={() => {
setShowAppAccessControl(true)
}}>
<div className='grow flex items-center gap-x-1.5 pr-1'>
<RiLockLine className='w-4 h-4 text-text-secondary shrink-0' />
{appAccessMode?.accessMode === AccessMode.ORGANIZATION && <p className='system-xs-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.organization')}</p>}
{appAccessMode?.accessMode === AccessMode.SPECIFIC_GROUPS_MEMBERS && <p className='system-xs-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.specific')}</p>}
{appAccessMode?.accessMode === AccessMode.PUBLIC && <p className='system-xs-medium text-text-secondary'>{t('app.accessControlDialog.accessItems.anyone')}</p>}
</div>
{!isAppAccessSet && <p className='shrink-0 system-xs-regular text-text-tertiary'>{t('app.publishApp.notSet')}</p>}
<div className='shrink-0 w-4 h-4 flex items-center justify-center'>
<RiArrowRightSLine className='w-4 h-4 text-text-quaternary' />
</div>
</div>
</div>
<div className='p-4 pt-3 border-t-[0.5px] border-t-black/5'>
<SuggestedAction disabled={!publishedAt} link={appURL} icon={<PlayCircle />}>{t('workflow.common.runApp')}</SuggestedAction>
<SuggestedAction disabled={!publishedAt || !useCanAccessApp?.result} link={appURL} icon={<PlayCircle />}>{t('workflow.common.runApp')}</SuggestedAction>
{appDetail?.mode === 'workflow'
? (
<SuggestedAction
disabled={!publishedAt}
disabled={!publishedAt || !useCanAccessApp?.result}
link={`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`}
icon={<LeftIndent02 className='w-4 h-4' />}
>
@ -214,7 +269,7 @@ const AppPublisher = ({
setEmbeddingModalOpen(true)
handleTrigger()
}}
disabled={!publishedAt}
disabled={!publishedAt || !useCanAccessApp?.result}
icon={<CodeBrowser className='w-4 h-4' />}
>
{t('workflow.common.embedIntoSite')}
@ -224,15 +279,15 @@ const AppPublisher = ({
onClick={() => {
handleOpenInExplore()
}}
disabled={!publishedAt}
disabled={!publishedAt || !useCanAccessApp?.result}
icon={<RiPlanetLine className='w-4 h-4' />}
>
{t('workflow.common.openInExplore')}
</SuggestedAction>
<SuggestedAction disabled={!publishedAt} link='./develop' icon={<FileText className='w-4 h-4' />}>{t('workflow.common.accessAPIReference')}</SuggestedAction>
<SuggestedAction disabled={!publishedAt || !useCanAccessApp?.result} link='./develop' icon={<FileText className='w-4 h-4' />}>{t('workflow.common.accessAPIReference')}</SuggestedAction>
{appDetail?.mode === 'workflow' && (
<WorkflowToolConfigureButton
disabled={!publishedAt}
disabled={!publishedAt || !useCanAccessApp?.result}
published={!!toolPublished}
detailNeedUpdate={!!toolPublished && published}
workflowAppId={appDetail?.id}
@ -248,6 +303,7 @@ const AppPublisher = ({
/>
)}
</div>
</>}
</div>
</PortalToFollowElemContent>
<EmbeddedModal
@ -257,6 +313,7 @@ const AppPublisher = ({
appBaseUrl={appBaseURL}
accessToken={accessToken}
/>
{showAppAccessControl && <AccessControl app={appDetail!} onConfirm={handleAccessControlUpdate} onClose={() => { setShowAppAccessControl(false) }} />}
</PortalToFollowElem >
)
}

4
web/i18n/en-US/app.ts
Unescape Escape View File

@ -198,6 +198,10 @@ const translation = {
},
updateSuccess: 'Update successfully',
},
publishApp: {
title: 'Who can access web app',
notSet: 'Not set',
},
}
export default translation

4
web/i18n/zh-Hans/app.ts
Unescape Escape View File

@ -199,6 +199,10 @@ const translation = {
},
updateSuccess: '更新成功',
},
publishApp: {
title: '谁可以访问我的应用',
notSet: '未设置',
},
}
export default translation

8
web/service/access-control.ts
Unescape Escape View File

@ -6,11 +6,11 @@ import type { App } from '@/types/app'
const NAME_SPACE = 'access-control'
export const useAppWhiteListSubjects = (appId: string, enabled: boolean) => {
export const useAppWhiteListSubjects = (appId: string | undefined, enabled: boolean) => {
return useQuery({
queryKey: [NAME_SPACE, 'app-whitelist-subjects', appId],
queryFn: () => get<{ groups: AccessControlGroup[]; members: AccessControlAccount[] }>(`/enterprise/webapp/app/subjects?appId=${appId}`),
enabled,
enabled: !!appId && enabled,
gcTime: 0,
})
}
@ -66,7 +66,7 @@ export const useUpdateAccessMode = () => {
})
}
export const useGetAppAccessMode = ({ appId, isInstalledApp }: { appId?: string; isInstalledApp: boolean }) => {
export const useGetAppAccessMode = ({ appId, isInstalledApp = true }: { appId?: string; isInstalledApp?: boolean }) => {
return useQuery({
queryKey: [NAME_SPACE, 'app-access-mode', appId],
queryFn: () => getAppAccessMode(appId!, isInstalledApp),
@ -75,7 +75,7 @@ export const useGetAppAccessMode = ({ appId, isInstalledApp }: { appId?: string;
})
}
export const useGetUserCanAccessApp = ({ appId, isInstalledApp }: { appId?: string; isInstalledApp: boolean }) => {
export const useGetUserCanAccessApp = ({ appId, isInstalledApp = true }: { appId?: string; isInstalledApp?: boolean }) => {
return useQuery({
queryKey: [NAME_SPACE, 'user-can-access-app', appId],
queryFn: () => getUserCanAccess(appId!, isInstalledApp),

Write Preview
Loading…
Cancel
Save