Feat/e license limit (#18436)

Co-authored-by: Garfield Dai <dai.hai@foxmail.com>

.github/workflows/build-push.yml

@@ -6,7 +6,7 @@ on:
       - "main"
       - "deploy/dev"
       - "deploy/enterprise"
-      - "e-0154"
+      - "e-0156"
   release:
     types: [published]
 

web/app/components/billing/type.ts

@@ -68,6 +68,10 @@ export type CurrentPlanInfoBackend = {
   model_load_balancing_enabled: boolean
   dataset_operator_enabled: boolean
   webapp_copyright_enabled: boolean
+  workspace_members: {
+    size: number
+    limit: number
+  }
 }
 
 export type SubscriptionItem = {

web/app/components/header/account-setting/members-page/invite-modal/index.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useContext } from 'use-context-selector'
 import { XMarkIcon } from '@heroicons/react/24/outline'
 import { useTranslation } from 'react-i18next'
@@ -17,6 +17,7 @@ import type { InvitationResult } from '@/models/common'
 import I18n from '@/context/i18n'
 
 import 'react-multi-email/dist/style.css'
+import { useProviderContextSelector } from '@/context/provider-context'
 type IInviteModalProps = {
   isEmailSetup: boolean
   onCancel: () => void
@@ -29,13 +30,26 @@ const InviteModal = ({
   onSend,
 }: IInviteModalProps) => {
   const { t } = useTranslation()
+  const licenseLimit = useProviderContextSelector(s => s.licenseLimit)
   const [emails, setEmails] = useState<string[]>([])
   const { notify } = useContext(ToastContext)
+  const [isLimited, setIsLimited] = useState(false)
+  const [isLimitExceeded, setIsLimitExceeded] = useState(false)
+  const [usedSize, setUsedSize] = useState(licenseLimit.workspace_members.size ?? 0)
+  useEffect(() => {
+    const limited = licenseLimit.workspace_members.limit > 0
+    const used = emails.length + licenseLimit.workspace_members.size
+    setIsLimited(limited)
+    setUsedSize(used)
+    setIsLimitExceeded(limited && (used > licenseLimit.workspace_members.limit))
+  }, [licenseLimit, emails])
 
   const { locale } = useContext(I18n)
   const [role, setRole] = useState<string>('normal')
 
   const handleSend = useCallback(async () => {
+    if (isLimitExceeded)
+      return
     if (emails.map((email: string) => emailRegex.test(email)).every(Boolean)) {
       try {
         const { result, invitation_results } = await inviteMember({
@@ -53,7 +67,7 @@ const InviteModal = ({
     else {
       notify({ type: 'error', message: t('common.members.emailInvalid') })
     }
-  }, [role, emails, notify, onCancel, onSend, t])
+  }, [isLimitExceeded, emails, role, locale, onCancel, onSend, notify, t])
 
   return (
     <div className={cn(s.wrap)}>
@@ -81,7 +95,7 @@ const InviteModal = ({
 
         <div>
           <div className='mb-2 text-sm font-medium text-gray-900'>{t('common.members.email')}</div>
-          <div className='mb-8 h-36 flex items-stretch'>
+          <div className='mb-8 h-36 flex flex-col items-stretch'>
             <ReactMultiEmail
               className={cn('w-full pt-2 px-3 outline-none border-none',
                 'appearance-none text-sm text-gray-900 rounded-lg overflow-y-auto',
@@ -101,6 +115,14 @@ const InviteModal = ({
               }
               placeholder={t('common.members.emailPlaceholder') || ''}
             />
+            <div className={
+              cn('flex items-center justify-end system-xs-regular text-text-tertiary',
+                (isLimited && usedSize > licenseLimit.workspace_members.limit) ? 'text-text-destructive' : '')}
+            >
+              <span>{usedSize}</span>
+              <span>/</span>
+              <span>{isLimited ? licenseLimit.workspace_members.limit : t('common.license.unlimited')}</span>
+            </div>
           </div>
           <div className='mb-6'>
             <RoleSelector value={role} onChange={setRole} />
@@ -109,7 +131,7 @@ const InviteModal = ({
             tabIndex={0}
             className='w-full'
             onClick={handleSend}
-            disabled={!emails.length}
+            disabled={!emails.length || isLimitExceeded}
             variant='primary'
           >
             {t('common.members.sendInvite')}

web/context/provider-context.tsx

@@ -36,6 +36,12 @@ type ProviderContextState = {
   modelLoadBalancingEnabled: boolean
   datasetOperatorEnabled: boolean
   webappCopyrightEnabled: boolean
+  licenseLimit: {
+    workspace_members: {
+      size: number
+      limit: number
+    }
+  }
 }
 const ProviderContext = createContext<ProviderContextState>({
   modelProviders: [],
@@ -66,6 +72,12 @@ const ProviderContext = createContext<ProviderContextState>({
   modelLoadBalancingEnabled: false,
   datasetOperatorEnabled: false,
   webappCopyrightEnabled: false,
+  licenseLimit: {
+    workspace_members: {
+      size: 0,
+      limit: 0,
+    },
+  },
 })
 
 export const useProviderContext = () => useContext(ProviderContext)
@@ -94,6 +106,12 @@ export const ProviderContextProvider = ({
   const [modelLoadBalancingEnabled, setModelLoadBalancingEnabled] = useState(false)
   const [datasetOperatorEnabled, setDatasetOperatorEnabled] = useState(false)
   const [webappCopyrightEnabled, setWebappCopyrightEnabled] = useState(false)
+  const [licenseLimit, setLicenseLimit] = useState({
+    workspace_members: {
+      size: 0,
+      limit: 0,
+    },
+  })
 
   const fetchPlan = async () => {
     const data = await fetchCurrentPlanInfo()
@@ -110,6 +128,8 @@ export const ProviderContextProvider = ({
       setDatasetOperatorEnabled(true)
     if (data.webapp_copyright_enabled)
       setWebappCopyrightEnabled(true)
+    if (data.workspace_members)
+      setLicenseLimit({ workspace_members: data.workspace_members })
   }
   useEffect(() => {
     fetchPlan()
@@ -129,6 +149,7 @@ export const ProviderContextProvider = ({
       modelLoadBalancingEnabled,
       datasetOperatorEnabled,
       webappCopyrightEnabled,
+      licenseLimit,
     }}>
       {children}
     </ProviderContext.Provider>

web/i18n/en-US/common.ts

@@ -617,6 +617,7 @@ const translation = {
   license: {
     expiring: 'Expiring in one day',
     expiring_plural: 'Expiring in {{count}} days',
+    unlimited: 'Unlimited',
   },
   pagination: {
     perPage: 'Items per page',

web/i18n/zh-Hans/common.ts

@@ -617,6 +617,7 @@ const translation = {
   license: {
     expiring: '许可证还有 1 天到期',
     expiring_plural: '许可证还有 {{count}} 天到期',
+    unlimited: '无限制',
   },
   pagination: {
     perPage: '每页显示',