feat: check user permission before publish web app

web/app/components/app/app-publisher/index.tsx

@@ -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,58 +227,83 @@ const AppPublisher = ({
               )
             }
           </div>
-          <div className='p-4 pt-3 border-t-[0.5px] border-t-black/5'>
+          {(isGettingAppAccessMode || isGettingUserCanAccessApp || isGettingAppWhiteListSubjects)
-            <SuggestedAction disabled={!publishedAt} link={appURL} icon={<PlayCircle />}>{t('workflow.common.runApp')}</SuggestedAction>
+            ? <div><Loading /></div>
-            {appDetail?.mode === 'workflow'
+            : <>
-              ? (
+              <Divider />
-                <SuggestedAction
+              <div className='p-4 pt-3'>
-                  disabled={!publishedAt}
+                <div className='flex items-center h-6'>
-                  link={`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`}
+                  <p className='system-xs-medium text-text-tertiary'>{t('app.publishApp.title')}</p>
-                  icon={<LeftIndent02 className='w-4 h-4' />}
+                </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'
-                  {t('workflow.common.batchRunApp')}
+                  onClick={() => {
-                </SuggestedAction>
+                    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 || !useCanAccessApp?.result} link={appURL} icon={<PlayCircle />}>{t('workflow.common.runApp')}</SuggestedAction>
+                {appDetail?.mode === 'workflow'
+                  ? (
+                    <SuggestedAction
+                      disabled={!publishedAt || !useCanAccessApp?.result}
+                      link={`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`}
+                      icon={<LeftIndent02 className='w-4 h-4' />}
+                    >
+                      {t('workflow.common.batchRunApp')}
+                    </SuggestedAction>
+                  )
+                  : (
+                    <SuggestedAction
+                      onClick={() => {
+                        setEmbeddingModalOpen(true)
+                        handleTrigger()
+                      }}
+                      disabled={!publishedAt || !useCanAccessApp?.result}
+                      icon={<CodeBrowser className='w-4 h-4' />}
+                    >
+                      {t('workflow.common.embedIntoSite')}
+                    </SuggestedAction>
+                  )}
                 <SuggestedAction
                   onClick={() => {
-                    setEmbeddingModalOpen(true)
+                    handleOpenInExplore()
-                    handleTrigger()
                   }}
-                  disabled={!publishedAt}
+                  disabled={!publishedAt || !useCanAccessApp?.result}
-                  icon={<CodeBrowser className='w-4 h-4' />}
+                  icon={<RiPlanetLine className='w-4 h-4' />}
                 >
-                  {t('workflow.common.embedIntoSite')}
+                  {t('workflow.common.openInExplore')}
                 </SuggestedAction>
-              )}
+                <SuggestedAction disabled={!publishedAt || !useCanAccessApp?.result} link='./develop' icon={<FileText className='w-4 h-4' />}>{t('workflow.common.accessAPIReference')}</SuggestedAction>
-            <SuggestedAction
+                {appDetail?.mode === 'workflow' && (
-              onClick={() => {
+                  <WorkflowToolConfigureButton
-                handleOpenInExplore()
+                    disabled={!publishedAt || !useCanAccessApp?.result}
-              }}
+                    published={!!toolPublished}
-              disabled={!publishedAt}
+                    detailNeedUpdate={!!toolPublished && published}
-              icon={<RiPlanetLine className='w-4 h-4' />}
+                    workflowAppId={appDetail?.id}
-            >
+                    icon={{
-              {t('workflow.common.openInExplore')}
+                      content: (appDetail.icon_type === 'image' ? '🤖' : appDetail?.icon) || '🤖',
-            </SuggestedAction>
+                      background: (appDetail.icon_type === 'image' ? appDefaultIconBackground : appDetail?.icon_background) || appDefaultIconBackground,
-            <SuggestedAction disabled={!publishedAt} link='./develop' icon={<FileText className='w-4 h-4' />}>{t('workflow.common.accessAPIReference')}</SuggestedAction>
+                    }}
-            {appDetail?.mode === 'workflow' && (
+                    name={appDetail?.name}
-              <WorkflowToolConfigureButton
+                    description={appDetail?.description}
-                disabled={!publishedAt}
+                    inputs={inputs}
-                published={!!toolPublished}
+                    handlePublish={handlePublish}
-                detailNeedUpdate={!!toolPublished && published}
+                    onRefreshData={onRefreshData}
-                workflowAppId={appDetail?.id}
+                  />
-                icon={{
+                )}
-                  content: (appDetail.icon_type === 'image' ? '🤖' : appDetail?.icon) || '🤖',
+              </div>
-                  background: (appDetail.icon_type === 'image' ? appDefaultIconBackground : appDetail?.icon_background) || appDefaultIconBackground,
+            </>}
-                }}
-                name={appDetail?.name}
-                description={appDetail?.description}
-                inputs={inputs}
-                handlePublish={handlePublish}
-                onRefreshData={onRefreshData}
-              />
-            )}
-          </div>
         </div>
       </PortalToFollowElemContent>
       <EmbeddedModal
@@ -257,6 +313,7 @@ const AppPublisher = ({
         appBaseUrl={appBaseURL}
         accessToken={accessToken}
       />
+      {showAppAccessControl && <AccessControl app={appDetail!} onConfirm={handleAccessControlUpdate} onClose={() => { setShowAppAccessControl(false) }} />}
     </PortalToFollowElem >
   )
 }

web/i18n/en-US/app.ts

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

web/i18n/zh-Hans/app.ts

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

web/service/access-control.ts

@@ -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),