refactor(i18n): about locales (#30336)

Co-authored-by: yyh <yuanyouhuilyz@gmail.com>

web/app/components/tools/edit-custom-collection-modal/test-api.spec.tsx

@@ -1,13 +1,17 @@
 import type { CustomCollectionBackend, CustomParamSchema } from '@/app/components/tools/types'
 import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { AuthType } from '@/app/components/tools/types'
-import I18n from '@/context/i18n'
 import { testAPIAvailable } from '@/service/tools'
 import TestApi from './test-api'
 
 vi.mock('@/service/tools', () => ({
   testAPIAvailable: vi.fn(),
 }))
+
+vi.mock('@/context/i18n', () => ({
+  useLocale: vi.fn(() => 'en-US'),
+}))
+
 const testAPIAvailableMock = vi.mocked(testAPIAvailable)
 
 describe('TestApi', () => {
@@ -40,19 +44,12 @@ describe('TestApi', () => {
   }
 
   const renderTestApi = () => {
-    const providerValue = {
-      locale: 'en-US',
-      i18n: {},
-      setLocaleOnClient: vi.fn(),
-    }
     return render(
-      <I18n.Provider value={providerValue as any}>
-        <TestApi
-          customCollection={customCollection}
-          tool={tool}
-          onHide={vi.fn()}
-        />
-      </I18n.Provider>,
+      <TestApi
+        customCollection={customCollection}
+        tool={tool}
+        onHide={vi.fn()}
+      />,
     )
   }
 

web/app/components/tools/edit-custom-collection-modal/test-api.tsx

@@ -5,12 +5,11 @@ import { RiSettings2Line } from '@remixicon/react'
 import * as React from 'react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
 import Button from '@/app/components/base/button'
 import Drawer from '@/app/components/base/drawer-plus'
 import Input from '@/app/components/base/input'
 import { AuthType } from '@/app/components/tools/types'
-import I18n from '@/context/i18n'
+import { useLocale } from '@/context/i18n'
 import { getLanguage } from '@/i18n-config/language'
 import { testAPIAvailable } from '@/service/tools'
 import ConfigCredentials from './config-credentials'
@@ -29,7 +28,7 @@ const TestApi: FC<Props> = ({
   onHide,
 }) => {
   const { t } = useTranslation()
-  const { locale } = useContext(I18n)
+  const locale = useLocale()
   const language = getLanguage(locale)
   const [credentialsModalShow, setCredentialsModalShow] = useState(false)
   const [tempCredential, setTempCredential] = React.useState<Credential>(customCollection.credentials)

web/app/components/tools/mcp/create-card.tsx

@@ -7,9 +7,8 @@ import {
 } from '@remixicon/react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
 import { useAppContext } from '@/context/app-context'
-import I18n from '@/context/i18n'
+import { useLocale } from '@/context/i18n'
 import { getLanguage } from '@/i18n-config/language'
 import { useCreateMCP } from '@/service/use-tools'
 import MCPModal from './modal'
@@ -20,7 +19,7 @@ type Props = {
 
 const NewMCPCard = ({ handleCreate }: Props) => {
   const { t } = useTranslation()
-  const { locale } = useContext(I18n)
+  const locale = useLocale()
   const language = getLanguage(locale)
   const { isCurrentWorkspaceManager } = useAppContext()
 

web/app/components/tools/mcp/detail/tool-item.tsx

@@ -2,9 +2,8 @@
 import type { Tool } from '@/app/components/tools/types'
 import * as React from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
 import Tooltip from '@/app/components/base/tooltip'
-import I18n from '@/context/i18n'
+import { useLocale } from '@/context/i18n'
 import { getLanguage } from '@/i18n-config/language'
 import { cn } from '@/utils/classnames'
 
@@ -15,7 +14,7 @@ type Props = {
 const MCPToolItem = ({
   tool,
 }: Props) => {
-  const { locale } = useContext(I18n)
+  const locale = useLocale()
   const language = getLanguage(locale)
   const { t } = useTranslation()
 

web/app/components/tools/provider/custom-create-card.tsx

@@ -7,11 +7,10 @@ import {
 } from '@remixicon/react'
 import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
 import Toast from '@/app/components/base/toast'
 import EditCustomToolModal from '@/app/components/tools/edit-custom-collection-modal'
 import { useAppContext } from '@/context/app-context'
-import I18n, { useDocLink } from '@/context/i18n'
+import { useDocLink, useLocale } from '@/context/i18n'
 import { getLanguage } from '@/i18n-config/language'
 import { createCustomCollection } from '@/service/tools'
 
@@ -21,7 +20,7 @@ type Props = {
 
 const Contribute = ({ onRefreshData }: Props) => {
   const { t } = useTranslation()
-  const { locale } = useContext(I18n)
+  const locale = useLocale()
   const language = getLanguage(locale)
   const { isCurrentWorkspaceManager } = useAppContext()
 

web/app/components/tools/provider/detail.tsx

@@ -6,7 +6,6 @@ import {
 import * as React from 'react'
 import { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useContext } from 'use-context-selector'
 import ActionButton from '@/app/components/base/action-button'
 import Button from '@/app/components/base/button'
 import Confirm from '@/app/components/base/confirm'
@@ -24,7 +23,7 @@ import EditCustomToolModal from '@/app/components/tools/edit-custom-collection-m
 import ConfigCredential from '@/app/components/tools/setting/build-in/config-credentials'
 import WorkflowToolModal from '@/app/components/tools/workflow-tool'
 import { useAppContext } from '@/context/app-context'
-import I18n from '@/context/i18n'
+import { useLocale } from '@/context/i18n'
 import { useModalContext } from '@/context/modal-context'
 import { useProviderContext } from '@/context/provider-context'
 
@@ -60,7 +59,7 @@ const ProviderDetail = ({
   onRefreshData,
 }: Props) => {
   const { t } = useTranslation()
-  const { locale } = useContext(I18n)
+  const locale = useLocale()
   const language = getLanguage(locale)
 
   const needAuth = collection.allow_delete || collection.type === CollectionType.model

web/app/components/tools/provider/tool-item.tsx

@@ -2,9 +2,8 @@
 import type { Collection, Tool } from '../types'
 import * as React from 'react'
 import { useState } from 'react'
-import { useContext } from 'use-context-selector'
 import SettingBuiltInTool from '@/app/components/app/configuration/config/agent/agent-tools/setting-built-in-tool'
-import I18n from '@/context/i18n'
+import { useLocale } from '@/context/i18n'
 import { getLanguage } from '@/i18n-config/language'
 import { cn } from '@/utils/classnames'
 
@@ -23,7 +22,7 @@ const ToolItem = ({
   isBuiltIn,
   isModel,
 }: Props) => {
-  const { locale } = useContext(I18n)
+  const locale = useLocale()
   const language = getLanguage(locale)
   const [showDetail, setShowDetail] = useState(false)