chore: select i18n and other

web/app/components/datasets/metadata/select-metadata-modal.tsx

@@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useState } from 'react'
+import React, { useCallback, useState } from 'react'
 import type { Props as CreateContentProps } from './create-content'
 import CreateContent from './create-content'
 import SelectMetadata from './select-metadata'
@@ -30,8 +30,13 @@ const SelectMetadataModal: FC<Props> = ({
   popupLeft = 4,
   onSave,
 }) => {
-  const [open, setOpen] = useState(true)
+  const [open, setOpen] = useState(false)
   const [step, setStep] = useState(Step.select)
+
+  const handleSave = useCallback((data: MetadataItem) => {
+    onSave(data)
+    setOpen(false)
+  }, [onSave])
   return (
     <PortalToFollowElem
       open={open}
@@ -50,14 +55,14 @@ const SelectMetadataModal: FC<Props> = ({
       <PortalToFollowElemContent className='z-[1000]'>
         {step === Step.select ? (
           <SelectMetadata
-            onSelect={onSave}
+            onSelect={handleSave}
             list={testMetadataList}
             onNew={() => setStep(Step.create)}
             onManage={() => { }}
           />
         ) : (
           <CreateContent
-            onSave={onSave}
+            onSave={handleSave}
             hasBack
             onBack={() => setStep(Step.select)}
           />

web/app/components/datasets/metadata/select-metadata.tsx

@@ -5,6 +5,9 @@ import { DataType } from './types'
 import type { MetadataItem } from './types'
 import SearchInput from '../../base/search-input'
 import { RiAddLine, RiArrowRightUpLine, RiHashtag, RiTextSnippet, RiTimeLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+
+const i18nPrefix = 'dataset.metadata.selectMetadata'
 
 type Props = {
   list: MetadataItem[]
@@ -27,6 +30,8 @@ const SelectMetadata: FC<Props> = ({
   onNew,
   onManage,
 }) => {
+  const { t } = useTranslation()
+
   const [query, setQuery] = useState('')
   return (
     <div className='w-[320px] pt-2 pb-0 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg backdrop-blur-[5px]'>
@@ -34,7 +39,7 @@ const SelectMetadata: FC<Props> = ({
         className='mx-2'
         value={query}
         onChange={setQuery}
-        placeholder='Search metadata'
+        placeholder={t(`${i18nPrefix}.search`)}
       />
       <div className='mt-2'>
         {list.map((item) => {
@@ -59,12 +64,12 @@ const SelectMetadata: FC<Props> = ({
       <div className='mt-1 flex justify-between p-1 border-t border-divider-subtle'>
         <div className='flex items-center h-6 px-3 text-text-secondary rounded-md hover:bg-state-base-hover cursor-pointer space-x-1' onClick={onNew}>
           <RiAddLine className='size-3.5' />
-          <div className='system-sm-medium'>New Metadata</div>
+          <div className='system-sm-medium'>{t(`${i18nPrefix}.newAction`)}</div>
         </div>
         <div className='flex items-center h-6 text-text-secondary '>
           <div className='mr-[3px] w-px h-3 bg-divider-regular'></div>
           <div className='flex h-full items-center px-1.5 hover:bg-state-base-hover rounded-md cursor-pointer' onClick={onManage}>
-            <div className='mr-1 system-sm-medium'>Manage</div>
+            <div className='mr-1 system-sm-medium'>{t(`${i18nPrefix}.manageAction`)}</div>
             <RiArrowRightUpLine className='size-3.5' />
           </div>
         </div>

web/i18n/en-US/dataset.ts

@@ -176,6 +176,11 @@ const translation = {
       name: 'Name',
       namePlaceholder: 'Add metadata name',
     },
+    selectMetadata: {
+      search: 'Search metadata',
+      newAction: 'New Metadata',
+      manageAction: 'Manage',
+    },
   },
 }
 

web/i18n/zh-Hans/dataset.ts

@@ -176,6 +176,11 @@ const translation = {
       name: '名称',
       namePlaceholder: '添加元数据名称',
     },
+    selectMetadata: {
+      search: '搜索元数据',
+      newAction: '新建元数据',
+      manageAction: '管理',
+    },
   },
 }