From 3107ec878afd717ad0ddb61273202596a94bd3a1 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 20 Feb 2025 16:06:10 +0800
Subject: [PATCH] chore: edit metadata batch i18n

---
 web/app/(commonLayout)/datasets/Container.tsx      |  9 +++++----
 .../input-has-set-multiple-value.tsx               |  4 +++-
 .../metadata/edit-metadata-batch/modal.tsx         | 14 ++++++++------
 .../datasets/metadata/metadata-document/index.tsx  |  4 +++-
 .../metadata/metadata-document/info-group.tsx      |  4 +++-
 web/i18n/en-US/dataset.ts                          |  7 +++++++
 web/i18n/zh-Hans/dataset.ts                        |  7 +++++++
 7 files changed, 36 insertions(+), 13 deletions(-)

diff --git a/web/app/(commonLayout)/datasets/Container.tsx b/web/app/(commonLayout)/datasets/Container.tsx
index 5e162d383e..3bfbc1bbd8 100644
--- a/web/app/(commonLayout)/datasets/Container.tsx
+++ b/web/app/(commonLayout)/datasets/Container.tsx
@@ -21,7 +21,8 @@ import Input from '@/app/components/base/input'
 import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/development'
 import CheckboxWithLabel from '@/app/components/datasets/create/website/base/checkbox-with-label'
 // import DatasetMetadataDrawer from '@/app/components/datasets/metadata/dataset-metadata-drawer'
-import MetaDataDocument from '@/app/components/datasets/metadata/metadata-document'
+// import MetaDataDocument from '@/app/components/datasets/metadata/metadata-document'
+import EditMetadataBatchModal from '@/app/components/datasets/metadata/edit-metadata-batch/modal'
 // Services
 import { fetchDatasetApiBaseUrl } from '@/service/datasets'
 
@@ -93,7 +94,7 @@ const Container = () => {
   return (
     <div ref={containerRef} className='grow relative flex flex-col bg-background-body overflow-y-auto scroll-container'>
       <div className='flex justify-end mt-[300px] mr-[100px]'>
-        <MetaDataDocument />
+        {/* <MetaDataDocument /> */}
         {/* <SelectMetadataModal trigger={<Button className='w-[200px]'>select</Button>} onSave={(data) => { console.log(data) }} />
         <CreateModal trigger={<Button className='w-[200px]'>add</Button>} hasBack onSave={(data) => { console.log(data) }} />
         <Button className='flex w-[200px]' size="medium" onClick={() => setShowExternalApiPanel(true)}>
@@ -111,7 +112,7 @@ const Container = () => {
           onIsBuiltInEnabledChange={setIsBuiltInEnabled}
           onClose={() => { }}
         /> */}
-        {/* <EditMetadataBatchModal
+        <EditMetadataBatchModal
           documentNum={20}
           list={[
             {
@@ -129,7 +130,7 @@ const Container = () => {
           ]}
           onHide={() => { }}
           onChange={(list, newList, isApplyToAllSelectDocument) => { console.log(list, newList, isApplyToAllSelectDocument) }}
-        /> */}
+        />
       </div>
       <div className='sticky top-0 flex justify-between pt-4 px-12 pb-2 leading-[56px] bg-background-body z-10 flex-wrap gap-y-2'>
         <TabSliderNew
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/input-has-set-multiple-value.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/input-has-set-multiple-value.tsx
index 6655cbe8fc..ccdb283433 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/input-has-set-multiple-value.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/input-has-set-multiple-value.tsx
@@ -2,6 +2,7 @@
 import { RiCloseLine } from '@remixicon/react'
 import type { FC } from 'react'
 import React from 'react'
+import { useTranslation } from 'react-i18next'
 
 type Props = {
   onClear: () => void
@@ -10,10 +11,11 @@ type Props = {
 const InputHasSetMultipleValue: FC<Props> = ({
   onClear,
 }) => {
+  const { t } = useTranslation()
   return (
     <div className='grow h-6 p-0.5 rounded-md bg-components-input-bg-normal text-[0]'>
       <div className='inline-flex rounded-[5px] items-center h-5 pl-1.5 pr-0.5 bg-components-badge-white-to-dark border-[0.5px] border-components-panel-border shadow-xs space-x-0.5'>
-        <div className='system-xs-regular text-text-secondary'>Multiple Value</div>
+        <div className='system-xs-regular text-text-secondary'>{t('dataset.metadata.batchEditMetadata.multipleValue')}</div>
         <div className='p-0.5rounded-sm text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary cursor-pointer'>
           <RiCloseLine
             className='size-3.5 '
diff --git a/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx b/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
index e116a80ccb..dccb623284 100644
--- a/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
+++ b/web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx
@@ -14,6 +14,8 @@ import { RiQuestionLine } from '@remixicon/react'
 import Divider from '@/app/components/base/divider'
 import AddMetadataButton from '../add-metadata-button'
 
+const i18nPrefix = 'dataset.metadata.batchEditMetadata'
+
 type Props = {
   documentNum: number
   list: MetadataItemWithEdit[]
@@ -65,13 +67,13 @@ const EditMetadataBatchModal: FC<Props> = ({
   }, [templeList, addedList, isApplyToAllSelectDocument, onChange])
   return (
     <Modal
-      title='Edit Metadata'
+      title={t(`${i18nPrefix}.editMetadata`)}
       isShow
       closable
       onClose={onHide}
       className='!max-w-[640px]'
     >
-      <div className='system-xs-medium text-text-accent'>Editing {documentNum} documents</div>
+      <div className='system-xs-medium text-text-accent'>{t(`${i18nPrefix}.editDocumentsNum`, { num: documentNum })}</div>
       {/* TODO handle list scroll. There is two list. */}
       <div className='mt-4 space-y-2'>
         {templeList.map(item => (
@@ -85,7 +87,7 @@ const EditMetadataBatchModal: FC<Props> = ({
       </div>
       <div className='mt-4 pl-[18px]'>
         <div className='flex items-center'>
-          <div className='mr-2 shrink-0 system-xs-medium-uppercase text-text-tertiary'>New metadata</div>
+          <div className='mr-2 shrink-0 system-xs-medium-uppercase text-text-tertiary'>{t('dataset.metadata.createMetadata.title')}</div>
           <Divider bgStyle='gradient' />
         </div>
         <div className='mt-2 space-y-2'>
@@ -111,11 +113,11 @@ const EditMetadataBatchModal: FC<Props> = ({
       </div>
 
       <div className='mt-4 flex items-center justify-between'>
-        <div className='flex items-center'>
+        <div className='flex items-center select-none'>
           <Checkbox checked={isApplyToAllSelectDocument} onCheck={() => setIsApplyToAllSelectDocument(!isApplyToAllSelectDocument)} />
-          <div className='ml-2 mr-1 system-xs-medium text-text-secondary'>Apply to all selected documents</div>
+          <div className='ml-2 mr-1 system-xs-medium text-text-secondary'>{t(`${i18nPrefix}.applyToAllSelectDocument`)}</div>
           <Tooltip popupContent={
-            <div className='max-w-[240px]'>Automatically create all the above edited and new metadata for all selected documents, otherwise editing metadata will only apply to documents with it.</div>
+            <div className='max-w-[240px]'>{t(`${i18nPrefix}.applyToAllSelectDocumentTip`)}</div>
           } >
             <div className='p-px cursor-pointer'>
               <RiQuestionLine className='size-3.5 text-text-tertiary' />
diff --git a/web/app/components/datasets/metadata/metadata-document/index.tsx b/web/app/components/datasets/metadata/metadata-document/index.tsx
index 37c1b3f59a..5aa101e83c 100644
--- a/web/app/components/datasets/metadata/metadata-document/index.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/index.tsx
@@ -52,7 +52,7 @@ const MetadataDocument: FC = () => {
   return (
     <div className='w-[388px] space-y-4'>
       {!hasData ? (
-        <div>
+        <div className='pl-2'>
           <InfoGroup
             title={t('dataset.metadata.metadata')}
             uppercaseTitle={false}
@@ -111,10 +111,12 @@ const MetadataDocument: FC = () => {
       )}
 
       <InfoGroup
+        className='pl-2'
         title={t(`${i18nPrefix}.documentInformation`)}
         list={documentInfoList}
       />
       <InfoGroup
+        className='pl-2'
         title={t(`${i18nPrefix}.technicalParameters`)}
         list={technicalParams}
       />
diff --git a/web/app/components/datasets/metadata/metadata-document/info-group.tsx b/web/app/components/datasets/metadata/metadata-document/info-group.tsx
index c44ae7b0aa..95241709bc 100644
--- a/web/app/components/datasets/metadata/metadata-document/info-group.tsx
+++ b/web/app/components/datasets/metadata/metadata-document/info-group.tsx
@@ -12,6 +12,7 @@ import SelectMetadataModal from '../select-metadata-modal'
 import AddMetadataButton from '../add-metadata-button'
 
 type Props = {
+  className?: string
   noHeader?: boolean
   title?: string
   uppercaseTitle?: boolean
@@ -26,6 +27,7 @@ type Props = {
 }
 
 const InfoGroup: FC<Props> = ({
+  className,
   noHeader,
   title,
   uppercaseTitle = true,
@@ -39,7 +41,7 @@ const InfoGroup: FC<Props> = ({
   onAdd,
 }) => {
   return (
-    <div className='bg-white'>
+    <div className={cn('bg-white', className)}>
       {!noHeader && (
         <div className='flex items-center justify-between'>
           <div className='flex items-center space-x-1'>
diff --git a/web/i18n/en-US/dataset.ts b/web/i18n/en-US/dataset.ts
index dd6a6a63e9..13a34340eb 100644
--- a/web/i18n/en-US/dataset.ts
+++ b/web/i18n/en-US/dataset.ts
@@ -178,6 +178,13 @@ const translation = {
       name: 'Name',
       namePlaceholder: 'Add metadata name',
     },
+    batchEditMetadata: {
+      editMetadata: 'Edit Metadata',
+      editDocumentsNum: 'Editing {{num}} documents',
+      applyToAllSelectDocument: 'Apply to all selected documents',
+      applyToAllSelectDocumentTip: 'Automatically create all the above edited and new metadata for all selected documents, otherwise editing metadata will only apply to documents with it.',
+      multipleValue: 'Multiple Value',
+    },
     selectMetadata: {
       search: 'Search metadata',
       newAction: 'New Metadata',
diff --git a/web/i18n/zh-Hans/dataset.ts b/web/i18n/zh-Hans/dataset.ts
index edaf0400a9..e1f92d050a 100644
--- a/web/i18n/zh-Hans/dataset.ts
+++ b/web/i18n/zh-Hans/dataset.ts
@@ -178,6 +178,13 @@ const translation = {
       name: '名称',
       namePlaceholder: '添加元数据名称',
     },
+    batchEditMetadata: {
+      editMetadata: '编辑元数据',
+      editDocumentsNum: '编辑 {{num}} 个文档',
+      applyToAllSelectDocument: '应用于所有选定文档',
+      applyToAllSelectDocumentTip: '自动为所有选定文档创建上述编辑和新元数据，否则仅对具有元数据的文档应用编辑。',
+      multipleValue: '多个值',
+    },
     selectMetadata: {
       search: '搜索元数据',
       newAction: '新建元数据',