wip: web app access control scope add 'external' option.

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 { RiBuildingLine, RiGlobalLine, RiLockLine, RiMoreFill } from '@remixicon/react'
+import { RiBuildingLine, RiGlobalLine, RiLockLine, RiMoreFill, RiVerifiedBadgeLine } from '@remixicon/react'
 import cn from '@/utils/classnames'
 import type { App } from '@/types/app'
 import Confirm from '@/app/components/base/confirm'
@@ -338,6 +338,9 @@ const AppCard = ({ app, onRefresh }: AppCardProps) => {
             {app.access_mode === AccessMode.ORGANIZATION && <Tooltip asChild={false} popupContent={t('app.accessItemsDescription.organization')}>
               <RiBuildingLine className='h-4 w-4 text-text-quaternary' />
             </Tooltip>}
+            {app.access_mode === AccessMode.EXTERNAL_MEMBERS && <Tooltip asChild={false} popupContent={t('app.accessItemsDescription.external')}>
+              <RiVerifiedBadgeLine className='h-4 w-4 text-text-quaternary' />
+            </Tooltip>}
           </div>
         </div>
         <div className='title-wrapper h-[90px] px-[14px] text-xs leading-normal text-text-tertiary'>

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

@@ -1,6 +1,6 @@
 'use client'
-import { Dialog } from '@headlessui/react'
-import { RiBuildingLine, RiGlobalLine } from '@remixicon/react'
+import { Description as DialogDescription, DialogTitle } from '@headlessui/react'
+import { RiBuildingLine, RiGlobalLine, RiVerifiedBadgeLine } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import { useCallback, useEffect } from 'react'
 import Button from '../../base/button'
@@ -67,8 +67,8 @@ export default function AccessControl(props: AccessControlProps) {
   return <AccessControlDialog show onClose={onClose}>
     <div className='flex flex-col gap-y-3'>
       <div className='pb-3 pl-6 pr-14 pt-6'>
-        <Dialog.Title className='title-2xl-semi-bold text-text-primary'>{t('app.accessControlDialog.title')}</Dialog.Title>
-        <Dialog.Description className='system-xs-regular mt-1 text-text-tertiary'>{t('app.accessControlDialog.description')}</Dialog.Description>
+        <DialogTitle className='title-2xl-semi-bold text-text-primary'>{t('app.accessControlDialog.title')}</DialogTitle>
+        <DialogDescription className='system-xs-regular mt-1 text-text-tertiary'>{t('app.accessControlDialog.description')}</DialogDescription>
       </div>
       <div className='flex flex-col gap-y-1 px-6 pb-3'>
         <div className='leading-6'>
@@ -86,6 +86,15 @@ export default function AccessControl(props: AccessControlProps) {
         <AccessControlItem type={AccessMode.SPECIFIC_GROUPS_MEMBERS}>
           <SpecificGroupsOrMembers />
         </AccessControlItem>
+        <AccessControlItem type={AccessMode.EXTERNAL_MEMBERS}>
+          <div className='flex items-center p-3'>
+            <div className='flex grow items-center gap-x-2'>
+              <RiVerifiedBadgeLine className='h-4 w-4 text-text-primary' />
+              <p className='system-sm-medium text-text-primary'>{t('app.accessControlDialog.accessItems.external')}</p>
+            </div>
+            {!hideTip && <WebAppSSONotEnabledTip />}
+          </div>
+        </AccessControlItem>
         <AccessControlItem type={AccessMode.PUBLIC}>
           <div className='flex items-center gap-x-2 p-3'>
             <RiGlobalLine className='h-4 w-4 text-text-primary' />

web/i18n/en-US/app.ts

@@ -200,6 +200,7 @@ const translation = {
     anyone: 'Anyone can access the web app',
     specific: 'Only specific groups or members can access the web app',
     organization: 'Anyone in the organization can access the web app',
+    external: 'Anyone with a verified account can access the web app',
   },
   accessControlDialog: {
     title: 'Web App Access Control',
@@ -207,8 +208,9 @@ const translation = {
     accessLabel: 'Who has access',
     accessItems: {
       anyone: 'Anyone with the link',
-      specific: 'Specific groups or members',
-      organization: 'Only members within the enterprise',
+      specific: 'Specific internal members',
+      organization: 'All internal members',
+      external: 'Authenticated external users',
     },
     groups_one: '{{count}} GROUP',
     groups_other: '{{count}} GROUPS',

web/i18n/ja-JP/app.ts

@@ -222,11 +222,13 @@ const translation = {
       anyone: '誰でもWebアプリにアクセス可能です',
       specific: '特定のグループやメンバーがWebアプリにアクセス可能です',
       organization: '組織内の誰でもWebアプリにアクセス可能です',
+      external: '認証された外部ユーザーがWebアプリにアクセス可能です',
     },
     accessItems: {
-      anyone: 'すべてのユーザー',
-      specific: '特定のグループメンバー',
-      organization: 'グループ内の全員',
+      anyone: 'リンクを知っているすべての人',
+      specific: '特定の内部メンバー',
+      organization: 'すべての内部メンバー',
+      external: '認証された外部ユーザー',
     },
     groups_one: '{{count}} グループ',
     groups_other: '{{count}} グループ',

web/i18n/zh-Hans/app.ts

@@ -201,20 +201,17 @@ const translation = {
     anyone: '任何人可以访问 web 应用',
     specific: '特定组或成员可以访问 web 应用',
     organization: '组织内任何人可以访问 web 应用',
+    external: '任何经过验证的外部用户都可以访问 web 应用',
   },
   accessControlDialog: {
     title: 'Web 应用访问权限',
     description: '设置 web 应用访问权限。',
     accessLabel: '谁可以访问',
-    accessItemsDescription: {
-      anyone: '任何人可以访问 web 应用',
-      specific: '特定组或成员可以访问 web 应用',
-      organization: '组织内任何人可以访问 web 应用',
-    },
     accessItems: {
       anyone: '任何人',
-      specific: '特定组或成员',
-      organization: '组织内任何人',
+      specific: '指定内部成员',
+      organization: '所有内部成员',
+      external: '经认证的外部用户',
     },
     groups_one: '{{count}} 个组',
     groups_other: '{{count}} 个组',

web/models/access-control.ts

@@ -7,6 +7,7 @@ export enum AccessMode {
   PUBLIC = 'public',
   SPECIFIC_GROUPS_MEMBERS = 'private',
   ORGANIZATION = 'private_all',
+  EXTERNAL_MEMBERS = 'verified_external',
 }
 
 export type AccessControlGroup = {