refactor(i18n): use JSON with flattened key and namespace (#30114)

Co-authored-by: yyh <yuanyouhuilyz@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

web/app/components/datasets/documents/create-from-pipeline/data-source/base/header.tsx

@@ -31,7 +31,7 @@ const Header = ({
         />
         <Divider type="vertical" className="mx-1 h-3.5 shrink-0" />
         <Tooltip
-          popupContent={t('datasetPipeline.configurationTip', { pluginName })}
+          popupContent={t('configurationTip', { ns: 'datasetPipeline', pluginName })}
           position="top"
         >
           <Button

web/app/components/datasets/documents/create-from-pipeline/data-source/local-file/index.tsx

@@ -113,11 +113,11 @@ const LocalFile = ({
     const ext = `.${getFileType(file)}`
     const isValidType = ACCEPTS.includes(ext.toLowerCase())
     if (!isValidType)
-      notify({ type: 'error', message: t('datasetCreation.stepOne.uploader.validation.typeError') })
+      notify({ type: 'error', message: t('stepOne.uploader.validation.typeError', { ns: 'datasetCreation' }) })
 
     const isValidSize = size <= fileUploadConfig.file_size_limit * 1024 * 1024
     if (!isValidSize)
-      notify({ type: 'error', message: t('datasetCreation.stepOne.uploader.validation.size', { size: fileUploadConfig.file_size_limit }) })
+      notify({ type: 'error', message: t('stepOne.uploader.validation.size', { ns: 'datasetCreation', size: fileUploadConfig.file_size_limit }) })
 
     return isValidType && isValidSize
   }, [notify, t, ACCEPTS, fileUploadConfig.file_size_limit])
@@ -155,7 +155,7 @@ const LocalFile = ({
         return Promise.resolve({ ...completeFile })
       })
       .catch((e) => {
-        const errorMessage = getFileUploadErrorMessage(e, t('datasetCreation.stepOne.uploader.failed'), t as any)
+        const errorMessage = getFileUploadErrorMessage(e, t('stepOne.uploader.failed', { ns: 'datasetCreation' }), t)
         notify({ type: 'error', message: errorMessage })
         updateFile(fileItem, -2, fileListRef.current)
         return Promise.resolve({ ...fileItem })
@@ -191,7 +191,7 @@ const LocalFile = ({
       return false
 
     if (files.length + localFileList.length > filesCountLimit && !IS_CE_EDITION) {
-      notify({ type: 'error', message: t('datasetCreation.stepOne.uploader.validation.filesNumber', { filesNumber: filesCountLimit }) })
+      notify({ type: 'error', message: t('stepOne.uploader.validation.filesNumber', { ns: 'datasetCreation', filesNumber: filesCountLimit }) })
       return false
     }
 
@@ -298,14 +298,15 @@ const LocalFile = ({
             <RiUploadCloud2Line className="mr-2 size-5" />
 
             <span>
-              {supportBatchUpload ? t('datasetCreation.stepOne.uploader.button') : t('datasetCreation.stepOne.uploader.buttonSingleFile')}
+              {supportBatchUpload ? t('stepOne.uploader.button', { ns: 'datasetCreation' }) : t('stepOne.uploader.buttonSingleFile', { ns: 'datasetCreation' })}
               {allowedExtensions.length > 0 && (
-                <label className="ml-1 cursor-pointer text-text-accent" onClick={selectHandle}>{t('datasetCreation.stepOne.uploader.browse')}</label>
+                <label className="ml-1 cursor-pointer text-text-accent" onClick={selectHandle}>{t('stepOne.uploader.browse', { ns: 'datasetCreation' })}</label>
               )}
             </span>
           </div>
           <div>
-            {t('datasetCreation.stepOne.uploader.tip', {
+            {t('stepOne.uploader.tip', {
+              ns: 'datasetCreation',
               size: fileUploadConfig.file_size_limit,
               supportTypes: supportTypesShowNames,
               batchCount: fileUploadConfig.batch_count_limit,

web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/index.tsx

@@ -154,7 +154,7 @@ const PageSelector = ({
   if (!currentDataList.length) {
     return (
       <div className="flex h-[296px] items-center justify-center text-[13px] text-text-tertiary">
-        {t('common.dataSource.notion.selector.noSearchResult')}
+        {t('dataSource.notion.selector.noSearchResult', { ns: 'common' })}
       </div>
     )
   }

web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/page-selector/item.tsx

@@ -131,7 +131,7 @@ const Item = ({ index, style, data }: ListChildComponentProps<{
             hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover group-hover:flex"
             onClick={() => handlePreview(index)}
           >
-            {t('common.dataSource.notion.selector.preview')}
+            {t('dataSource.notion.selector.preview', { ns: 'common' })}
           </div>
         )
       }

web/app/components/datasets/documents/create-from-pipeline/data-source/online-documents/title.tsx

@@ -12,7 +12,7 @@ const Title = ({
 
   return (
     <div className="system-sm-medium px-[5px] py-1 text-text-secondary">
-      {t('datasetPipeline.onlineDocument.pageSelectorTitle', { name })}
+      {t('onlineDocument.pageSelectorTitle', { ns: 'datasetPipeline', name })}
     </div>
   )
 }

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/connect/index.tsx

@@ -31,16 +31,16 @@ const Connect = ({
         <div className="flex flex-col gap-y-1 pb-3 pt-1">
           <div className="system-md-semibold text-text-secondary">
             <span className="relative">
-              {t('datasetPipeline.onlineDrive.notConnected', { name: nodeData.title })}
+              {t('onlineDrive.notConnected', { ns: 'datasetPipeline', name: nodeData.title })}
               <Icon3Dots className="absolute -right-2.5 -top-1.5 size-4 text-text-secondary" />
             </span>
           </div>
           <div className="system-sm-regular text-text-tertiary">
-            {t('datasetPipeline.onlineDrive.notConnectedTip', { name: nodeData.title })}
+            {t('onlineDrive.notConnectedTip', { ns: 'datasetPipeline', name: nodeData.title })}
           </div>
         </div>
         <Button className="w-fit" variant="primary" onClick={onSetting}>
-          {t('datasetCreation.stepOne.connect')}
+          {t('stepOne.connect', { ns: 'datasetCreation' })}
         </Button>
       </div>
     </div>

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/bucket.tsx

@@ -31,7 +31,7 @@ const Bucket = ({
   return (
     <>
       <Tooltip
-        popupContent={t('datasetPipeline.onlineDrive.breadcrumbs.allBuckets')}
+        popupContent={t('onlineDrive.breadcrumbs.allBuckets', { ns: 'datasetPipeline' })}
       >
         <button
           type="button"

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/drive.tsx

@@ -25,7 +25,7 @@ const Drive = ({
         onClick={handleBackToRoot}
         disabled={breadcrumbs.length === 0}
       >
-        {t('datasetPipeline.onlineDrive.breadcrumbs.allFiles')}
+        {t('onlineDrive.breadcrumbs.allFiles', { ns: 'datasetPipeline' })}
       </button>
       {breadcrumbs.length > 0 && <span className="system-xs-regular text-divider-deep">/</span>}
     </>

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/breadcrumbs/index.tsx

@@ -84,7 +84,8 @@ const Breadcrumbs = ({
     <div className="flex grow items-center overflow-hidden">
       {showSearchResult && (
         <div className="system-sm-medium text-test-secondary px-[5px]">
-          {t('datasetPipeline.onlineDrive.breadcrumbs.searchResult', {
+          {t('onlineDrive.breadcrumbs.searchResult', {
+            ns: 'datasetPipeline',
             searchResultsLength,
             folderName: breadcrumbs.length > 0 ? breadcrumbs[breadcrumbs.length - 1] : bucket,
           })}
@@ -92,7 +93,7 @@ const Breadcrumbs = ({
       )}
       {!showSearchResult && showBucketListTitle && (
         <div className="system-sm-medium text-test-secondary px-[5px]">
-          {t('datasetPipeline.onlineDrive.breadcrumbs.allBuckets')}
+          {t('onlineDrive.breadcrumbs.allBuckets', { ns: 'datasetPipeline' })}
         </div>
       )}
       {!showSearchResult && !showBucketListTitle && (

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/header/index.tsx

@@ -39,7 +39,7 @@ const Header = ({
         value={inputValue}
         onChange={handleInputChange}
         onClear={handleResetKeywords}
-        placeholder={t('datasetPipeline.onlineDrive.breadcrumbs.searchPlaceholder')}
+        placeholder={t('onlineDrive.breadcrumbs.searchPlaceholder', { ns: 'datasetPipeline' })}
         showLeftIcon
         showClearIcon
         wrapperClassName="w-[200px] h-8 shrink-0"

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-folder.tsx

@@ -6,7 +6,7 @@ const EmptyFolder = () => {
 
   return (
     <div className="flex size-full items-center justify-center rounded-[10px] bg-background-section px-1 py-1.5">
-      <span className="system-xs-regular text-text-tertiary">{t('datasetPipeline.onlineDrive.emptyFolder')}</span>
+      <span className="system-xs-regular text-text-tertiary">{t('onlineDrive.emptyFolder', { ns: 'datasetPipeline' })}</span>
     </div>
   )
 }

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/empty-search-result.tsx

@@ -18,7 +18,7 @@ const EmptySearchResult = ({
     <div className="flex size-full flex-col items-center justify-center gap-y-2 rounded-[10px] bg-background-section p-6">
       <SearchMenu className="size-8 text-text-tertiary" />
       <div className="system-sm-regular text-text-secondary">
-        {t('datasetPipeline.onlineDrive.emptySearchResult')}
+        {t('onlineDrive.emptySearchResult', { ns: 'datasetPipeline' })}
       </div>
       <Button
         variant="secondary-accent"
@@ -26,7 +26,7 @@ const EmptySearchResult = ({
         onClick={onResetKeywords}
         className="px-1.5"
       >
-        <span className="px-[3px]">{t('datasetPipeline.onlineDrive.resetKeywords')}</span>
+        <span className="px-[3px]">{t('onlineDrive.resetKeywords', { ns: 'datasetPipeline' })}</span>
       </Button>
     </div>
   )

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/index.tsx

@@ -94,7 +94,7 @@ const List = ({
                 className="flex items-center justify-center py-2"
                 role="status"
                 aria-live="polite"
-                aria-label={t('appApi.loading')}
+                aria-label={t('loading', { ns: 'appApi' })}
               >
                 <RiLoader2Line className="animation-spin size-4 text-text-tertiary" />
               </div>

web/app/components/datasets/documents/create-from-pipeline/data-source/online-drive/file-list/list/item.tsx

@@ -36,7 +36,7 @@ const Item = ({
   const Wrapper = disabled ? Tooltip : React.Fragment
   const wrapperProps = disabled
     ? {
-        popupContent: t('datasetPipeline.onlineDrive.notSupportedFileType'),
+        popupContent: t('onlineDrive.notSupportedFileType', { ns: 'datasetPipeline' }),
         position: 'top-end' as Placement,
         offset: { mainAxis: 4, crossAxis: -104 },
       }

web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result-item.tsx

@@ -76,7 +76,7 @@ const CrawledResultItem = ({
           onClick={onPreview}
           className="system-xs-medium-uppercase right-2 top-2 hidden px-1.5 group-hover:absolute group-hover:block"
         >
-          {t('datasetCreation.stepOne.website.preview')}
+          {t('stepOne.website.preview', { ns: 'datasetCreation' })}
         </Button>
       )}
     </div>

web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawled-result.tsx

@@ -7,7 +7,7 @@ import { cn } from '@/utils/classnames'
 import CheckboxWithLabel from './checkbox-with-label'
 import CrawledResultItem from './crawled-result-item'
 
-const I18N_PREFIX = 'datasetCreation.stepOne.website'
+const I18N_PREFIX = 'stepOne.website'
 
 type CrawledResultProps = {
   className?: string
@@ -66,6 +66,7 @@ const CrawledResult = ({
     <div className={cn('flex flex-col gap-y-2', className)}>
       <div className="system-sm-medium pt-2 text-text-primary">
         {t(`${I18N_PREFIX}.scrapTimeInfo`, {
+          ns: 'datasetCreation',
           total: list.length,
           time: usedTime.toFixed(1),
         })}
@@ -76,7 +77,7 @@ const CrawledResult = ({
             <CheckboxWithLabel
               isChecked={isCheckAll}
               onChange={handleCheckedAll}
-              label={isCheckAll ? t(`${I18N_PREFIX}.resetAll`) : t(`${I18N_PREFIX}.selectAll`)}
+              label={isCheckAll ? t(`${I18N_PREFIX}.resetAll`, { ns: 'datasetCreation' }) : t(`${I18N_PREFIX}.selectAll`, { ns: 'datasetCreation' })}
             />
           </div>
         )}

web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/crawling.tsx

@@ -66,7 +66,7 @@ const Crawling = ({
   return (
     <div className={cn('mt-2 flex flex-col gap-y-2 pt-2', className)}>
       <div className="system-sm-medium text-text-primary">
-        {t('datasetCreation.stepOne.website.totalPageScraped')}
+        {t('stepOne.website.totalPageScraped', { ns: 'datasetCreation' })}
         {' '}
         {crawledNum}
         /

web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/base/options/index.tsx

@@ -13,7 +13,7 @@ import { useConfigurations, useInitialData } from '@/app/components/rag-pipeline
 import { CrawlStep } from '@/models/datasets'
 import { cn } from '@/utils/classnames'
 
-const I18N_PREFIX = 'datasetCreation.stepOne.website'
+const I18N_PREFIX = 'stepOne.website'
 
 type OptionsProps = {
   variables: RAGPipelineVariables
@@ -89,7 +89,7 @@ const Options = ({
           onClick={foldToggle}
         >
           <span className="system-sm-semibold-uppercase text-text-secondary">
-            {t(`${I18N_PREFIX}.options`)}
+            {t(`${I18N_PREFIX}.options`, { ns: 'datasetCreation' })}
           </span>
           <ArrowDownRoundFill className={cn('h-4 w-4 shrink-0 text-text-quaternary', fold && '-rotate-90')} />
         </div>
@@ -102,7 +102,7 @@ const Options = ({
           spinnerClassName="!ml-0"
         >
           <RiPlayLargeLine className="size-4" />
-          <span className="px-0.5">{!isRunning ? t(`${I18N_PREFIX}.run`) : t(`${I18N_PREFIX}.running`)}</span>
+          <span className="px-0.5">{!isRunning ? t(`${I18N_PREFIX}.run`, { ns: 'datasetCreation' }) : t(`${I18N_PREFIX}.running`, { ns: 'datasetCreation' })}</span>
         </Button>
       </div>
       {!fold && (

web/app/components/datasets/documents/create-from-pipeline/data-source/website-crawl/index.tsx

@@ -29,7 +29,7 @@ import Crawling from './base/crawling'
 import ErrorMessage from './base/error-message'
 import Options from './base/options'
 
-const I18N_PREFIX = 'datasetCreation.stepOne.website'
+const I18N_PREFIX = 'stepOne.website'
 
 export type WebsiteCrawlProps = {
   nodeId: string
@@ -130,7 +130,7 @@ const WebsiteCrawl = ({
           setStep(CrawlStep.finished)
         },
         onDataSourceNodeError: (error: DataSourceNodeErrorResponse) => {
-          setCrawlErrorMessage(error.error || t(`${I18N_PREFIX}.unknownError`))
+          setCrawlErrorMessage(error.error || t(`${I18N_PREFIX}.unknownError`, { ns: 'datasetCreation' }))
           setStep(CrawlStep.finished)
         },
       },
@@ -184,7 +184,7 @@ const WebsiteCrawl = ({
           {showError && (
             <ErrorMessage
               className="mt-2"
-              title={t(`${I18N_PREFIX}.exceptionErrorTitle`)}
+              title={t(`${I18N_PREFIX}.exceptionErrorTitle`, { ns: 'datasetCreation' })}
               errorMsg={crawlErrorMessage}
             />
           )}