feat: check user permission before publish web app

1 year ago · 080776c516
parent 5bfc2456f2
commit 080776c516
4 changed files with 117 additions and 52 deletions
--- a/web/app/components/app/app-publisher/index.tsx
+++ b/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'>
-            <SuggestedAction disabled={!publishedAt} link={appURL} icon={<PlayCircle />}>{t('workflow.common.runApp')}</SuggestedAction>
-            {appDetail?.mode === 'workflow'
-              ? (
-                <SuggestedAction
-                  disabled={!publishedAt}
-                  link={`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`}
-                  icon={<LeftIndent02 className='w-4 h-4' />}
-                >
-                  {t('workflow.common.batchRunApp')}
-                </SuggestedAction>
-              )
-              : (
+          {(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 || !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)
-                    handleTrigger()
+                    handleOpenInExplore()
                  }}
-                  disabled={!publishedAt}
-                  icon={<CodeBrowser className='w-4 h-4' />}
+                  disabled={!publishedAt || !useCanAccessApp?.result}
+                  icon={<RiPlanetLine className='w-4 h-4' />}
                >
-                  {t('workflow.common.embedIntoSite')}
+                  {t('workflow.common.openInExplore')}
                </SuggestedAction>
-              )}
-            <SuggestedAction
-              onClick={() => {
-                handleOpenInExplore()
-              }}
-              disabled={!publishedAt}
-              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>
-            {appDetail?.mode === 'workflow' && (
-              <WorkflowToolConfigureButton
-                disabled={!publishedAt}
-                published={!!toolPublished}
-                detailNeedUpdate={!!toolPublished && published}
-                workflowAppId={appDetail?.id}
-                icon={{
-                  content: (appDetail.icon_type === 'image' ? '🤖' : appDetail?.icon) || '🤖',
-                  background: (appDetail.icon_type === 'image' ? appDefaultIconBackground : appDetail?.icon_background) || appDefaultIconBackground,
-                }}
-                name={appDetail?.name}
-                description={appDetail?.description}
-                inputs={inputs}
-                handlePublish={handlePublish}
-                onRefreshData={onRefreshData}
-              />
-            )}
-          </div>
+                <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 || !useCanAccessApp?.result}
+                    published={!!toolPublished}
+                    detailNeedUpdate={!!toolPublished && published}
+                    workflowAppId={appDetail?.id}
+                    icon={{
+                      content: (appDetail.icon_type === 'image' ? '🤖' : appDetail?.icon) || '🤖',
+                      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 >
  )
 }
--- a/web/i18n/en-US/app.ts
+++ b/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
--- a/web/i18n/zh-Hans/app.ts
+++ b/web/i18n/zh-Hans/app.ts
@ -199,6 +199,10 @@ const translation = {
    },
    updateSuccess: '更新成功',
  },
+  publishApp: {
+    title: '谁可以访问我的应用',
+    notSet: '未设置',
+  },
 }

 export default translation
--- a/web/service/access-control.ts
+++ b/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),