wip: show web app access control menu in app card and app detail

web/app/(commonLayout)/apps/AppCard.tsx

@@ -4,7 +4,7 @@ import { useContext, useContextSelector } from 'use-context-selector'
 import { useRouter } from 'next/navigation'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { RiMoreFill } from '@remixicon/react'
+import { RiGlobalLine, RiMoreFill } from '@remixicon/react'
 import s from './style.module.css'
 import cn from '@/utils/classnames'
 import type { App } from '@/types/app'
@@ -31,6 +31,8 @@ import DSLExportConfirmModal from '@/app/components/workflow/dsl-export-confirm-
 import { fetchWorkflowDraft } from '@/service/workflow'
 import { fetchInstalledAppList } from '@/service/explore'
 import { AppTypeIcon } from '@/app/components/app/type-selector'
+import Tooltip from '@/app/components/base/tooltip'
+import AccessControl from '@/app/components/app/app-access-control'
 
 export type AppCardProps = {
   app: App
@@ -53,6 +55,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
   const [showDuplicateModal, setShowDuplicateModal] = useState(false)
   const [showSwitchModal, setShowSwitchModal] = useState<boolean>(false)
   const [showConfirmDelete, setShowConfirmDelete] = useState(false)
+  const [showAccessControl, setShowAccessControl] = useState(true)
   const [secretEnvList, setSecretEnvList] = useState<EnvironmentVariable[]>([])
 
   const onConfirmDelete = useCallback(async () => {
@@ -209,6 +212,12 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
       e.preventDefault()
       setShowConfirmDelete(true)
     }
+    const onClickAccessControl = async (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation()
+      props.onClick?.()
+      e.preventDefault()
+      setShowAccessControl(true)
+    }
     const onClickInstalledApp = async (e: React.MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation()
       props.onClick?.()
@@ -252,6 +261,10 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
           <span className={s.actionName}>{t('app.openInExplore')}</span>
         </button>
         <Divider className="!my-1" />
+        <button className={s.actionItem} onClick={onClickAccessControl}>
+          <span className={s.actionName}>{t('app.accessControl')}</span>
+        </button>
+        <Divider />
         <div
           className={cn(s.actionItem, s.deleteActionItem, 'group')}
           onClick={onClickDelete}
@@ -278,7 +291,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
         }}
         className='relative h-[160px] group col-span-1 bg-components-card-bg border-[1px] border-solid border-components-card-border rounded-xl shadow-sm inline-flex flex-col transition-all duration-200 ease-in-out cursor-pointer hover:shadow-lg'
       >
-        <div className='flex pt-[14px] px-[14px] pb-3 h-[66px] items-center gap-3 grow-0 shrink-0'>
+        <div className='flex p-4 pb-3 h-[68px] items-start gap-3 grow-0 shrink-0'>
           <div className='relative shrink-0'>
             <AppIcon
               size="large"
@@ -301,6 +314,11 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
               {app.mode === 'completion' && <div className='truncate'>{t('app.types.completion').toUpperCase()}</div>}
             </div>
           </div>
+          <div className='shrink-0 w-5 h-5 flex items-center justify-center'>
+            <Tooltip asChild={false} popupContent={t('app.accessControlDialog.accessItems.anyone')}>
+              <RiGlobalLine className='text-text-accent w-4 h-4' />
+            </Tooltip>
+          </div>
         </div>
         <div className='title-wrapper h-[90px] px-[14px] text-xs leading-normal text-text-tertiary'>
           <div
@@ -357,7 +375,7 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
                   popupClassName={
                     (app.mode === 'completion' || app.mode === 'chat')
                       ? '!w-[256px] translate-x-[-224px]'
-                      : '!w-[160px] translate-x-[-128px]'
+                      : '!w-[216px] translate-x-[-128px]'
                   }
                   className={'h-fit !z-20'}
                 />
@@ -418,6 +436,9 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
           onClose={() => setSecretEnvList([])}
         />
       )}
+      {showAccessControl && (
+        <AccessControl onClose={() => setShowAccessControl(false)} />
+      )}
     </>
   )
 }

web/app/components/app-sidebar/app-info.tsx

@@ -5,6 +5,7 @@ import { RiArrowDownSLine } from '@remixicon/react'
 import React, { useCallback, useState } from 'react'
 import AppIcon from '../base/app-icon'
 import SwitchAppModal from '../app/switch-app-modal'
+import AccessControl from '../app/app-access-control'
 import s from './style.module.css'
 import cn from '@/utils/classnames'
 import {
@@ -50,6 +51,7 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
   const [showSwitchTip, setShowSwitchTip] = useState<string>('')
   const [showSwitchModal, setShowSwitchModal] = useState<boolean>(false)
   const [showImportDSLModal, setShowImportDSLModal] = useState<boolean>(false)
+  const [showAccessControl, setShowAccessControl] = useState<boolean>(false)
   const [secretEnvList, setSecretEnvList] = useState<EnvironmentVariable[]>([])
 
   const mutateApps = useContextSelector(
@@ -177,6 +179,13 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
     setShowConfirmDelete(false)
   }, [appDetail, mutateApps, notify, onPlanInfoChanged, replace, t])
 
+  const handleClickAccessControl = useCallback(() => {
+    if (!appDetail)
+      return
+    setShowAccessControl(true)
+    setOpen(false)
+  }, [appDetail])
+
   const { isCurrentWorkspaceEditor } = useAppContext()
 
   if (!appDetail)
@@ -374,6 +383,10 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
                   </div>
                 )
               }
+              <Divider />
+              <div className='h-9 py-2 px-3 mx-1 flex items-center hover:bg-gray-50 rounded-lg cursor-pointer' onClick={handleClickAccessControl}>
+                <span className='text-gray-700 text-sm leading-5'>{t('app.accessControl')}</span>
+              </div>
               <Divider className="!my-1" />
               <div className='group h-9 py-2 px-3 mx-1 flex items-center hover:bg-red-50 rounded-lg cursor-pointer' onClick={() => {
                 setOpen(false)
@@ -466,6 +479,9 @@ const AppInfo = ({ expand }: IAppInfoProps) => {
             onClose={() => setSecretEnvList([])}
           />
         )}
+        {
+          showAccessControl && <AccessControl />
+        }
       </div>
     </PortalToFollowElem>
   )

web/app/components/app/app-access-control/access-control-dialog.tsx

@@ -0,0 +1,59 @@
+import { Fragment, useCallback } from 'react'
+import type { ReactNode } from 'react'
+import { Dialog, Transition } from '@headlessui/react'
+import { RiCloseLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+
+type DialogProps = {
+  className?: string
+  children: ReactNode
+  show: boolean
+  onClose?: () => void
+}
+
+const AccessControlDialog = ({
+  className,
+  children,
+  show,
+  onClose,
+}: DialogProps) => {
+  const close = useCallback(() => onClose?.(), [onClose])
+  return (
+    <Transition appear show={show} as={Fragment}>
+      <Dialog as="div" open={true} className="relative z-40" onClose={close}>
+        <Transition.Child
+          as={Fragment}
+          enter="ease-out duration-300"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-200"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="fixed inset-0 bg-background-overlay bg-opacity-25" />
+        </Transition.Child>
+
+        <div className="fixed inset-0 flex items-center justify-center">
+          <Transition.Child
+            as={Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 scale-95"
+            enterTo="opacity-100 scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 scale-100"
+            leaveTo="opacity-0 scale-95"
+          >
+            <Dialog.Panel className={cn('w-[600px] min-h-[323px] h-auto bg-components-panel-bg shadow-xl rounded-2xl transition-all transform relative p-0 overflow-y-auto', className)}>
+              <div onClick={close} className="absolute top-5 right-5 w-8 h-8 flex items-center justify-center cursor-pointer z-10">
+                <RiCloseLine className='w-5 h-5' />
+              </div>
+              {children}
+            </Dialog.Panel>
+          </Transition.Child>
+        </div>
+      </Dialog>
+    </Transition >
+  )
+}
+
+export default AccessControlDialog

web/app/components/app/app-access-control/index.tsx

@@ -0,0 +1,31 @@
+'use client'
+import { Dialog } from '@headlessui/react'
+import { useTranslation } from 'react-i18next'
+import Button from '../../base/button'
+import AccessControlDialog from './access-control-dialog'
+
+type AccessControlProps = {
+  onClose: () => void
+}
+
+export default function AccessControl(props: AccessControlProps) {
+  const { t } = useTranslation()
+  return <AccessControlDialog show onClose={props.onClose}>
+    <div className='flex flex-col gap-y-3'>
+      <div className='pt-6 pr-14 pb-3 pl-6'>
+        <Dialog.Title className='title-2xl-semi-bold text-text-primary'>{t('app.accessControlDialog.title')}</Dialog.Title>
+        <Dialog.Description className='mt-1 system-xs-regular text-text-tertiary'>{t('app.accessControlDialog.description')}</Dialog.Description>
+      </div>
+      <div className='px-6 pb-3 flex flex-col gap-y-1'>
+        <div className='leading-6'>
+          <p className='system-sm-medium'>{t('app.accessControlDialog.accessLabel')}</p>
+        </div>
+
+      </div>
+      <div className='flex items-center justify-end p-6 pt-5 gap-x-2'>
+        <Button onClick={props.onClose}>{t('common.operation.cancel')}</Button>
+        <Button variant='primary'>{t('common.operation.confirm')}</Button>
+      </div>
+    </div>
+  </AccessControlDialog>
+}

web/i18n/en-US/app.ts

@@ -174,6 +174,17 @@ const translation = {
     },
   },
   showMyCreatedAppsOnly: 'Created by me',
+  accessControl: 'Webapp Access Control',
+  accessControlDialog: {
+    title: 'Access Control',
+    description: 'Set webapp access permissions',
+    accessLabel: 'Who has access',
+    accessItems: {
+      anyone: 'Anyone with the link',
+      specific: 'Specific groups or members',
+      organization: 'Only members within the organization',
+    },
+  },
 }
 
 export default translation

web/i18n/zh-Hans/app.ts

@@ -175,6 +175,17 @@ const translation = {
   },
   openInExplore: '在“探索”中打开',
   showMyCreatedAppsOnly: '我创建的',
+  accessControl: 'WebApp 访问控制',
+  accessControlDialog: {
+    title: 'WebApp 访问权限',
+    description: '设置 WebApp 的访问权限',
+    accessLabel: '配置谁有访问权限',
+    accessItems: {
+      anyone: '任何人',
+      specific: '特定组或用户',
+      organization: '组织内的任何人',
+    },
+  },
 }
 
 export default translation