feat: doc metadata can show edit and cancel

web/app/components/datasets/metadata/edit-metadata-batch/input-combined.tsx

@@ -20,7 +20,7 @@ const InputCombined: FC<Props> = ({
   onChange,
 }) => {
   // TODO: configClassName...
-  const className = cn('grow p-0.5 h-6  text-xs', configClassName)
+  const className = cn('grow p-0.5 h-6  text-xs')
   if (type === DataType.time)
     return <div className='grow text-xs'>Datepicker placeholder</div>
 
@@ -40,6 +40,7 @@ const InputCombined: FC<Props> = ({
   }
   return (
     <Input
+      wrapperClassName={configClassName}
       className={cn(className, 'rounded-md')}
       value={value}
       onChange={e => onChange(e.target.value)}

web/app/components/datasets/metadata/metadata-document/field.tsx

@@ -13,7 +13,7 @@ const Field: FC<Props> = ({
 }) => {
   return (
     <div className='flex items-start space-x-2'>
-      <div className='shrink-0 flex w-[128px] truncate pt-1 h-6 items-center text-text-tertiary system-xs-medium'>
+      <div className='shrink-0 w-[128px] truncate py-1 items-center text-text-tertiary system-xs-medium'>
         {label}
       </div>
       <div className='shrink-0 w-[244px]'>

web/app/components/datasets/metadata/metadata-document/index.tsx

@@ -26,6 +26,7 @@ const MetadataDocument: FC = () => {
       type: DataType.string,
     },
   ])
+  const [tempList, setTempList] = useState<MetadataItemWithValue[]>(list)
   const hasData = list.length > 0
   return (
     <div>
@@ -33,18 +34,39 @@ const MetadataDocument: FC = () => {
         <InfoGroup
           title='Metadata'
           titleTooltip='Metadata serves as a critical filter that enhances the accuracy and relevance of information retrieval. You can modify and add metadata for this document here.'
-          list={list}
-          headerRight={isEdit ? <div>Save</div> : <Button variant='ghost' onClick={() => setIsEdit(true)}>
-            <RiEditLine className='size-3.5 text-text-tertiary cursor-pointer' />
-            <div>{t('common.operation.edit')}</div>
-          </Button>}
+          list={isEdit ? tempList : list}
+          headerRight={isEdit ? (
+            <div className='flex space-x-1'>
+              <Button variant='ghost' size='small' onClick={() => {
+                setTempList(list)
+                setIsEdit(false)
+              }}>
+                <div>{t('common.operation.cancel')}</div>
+              </Button>
+              <Button variant='primary' size='small' onClick={() => {
+                setIsEdit(false)
+                setList(tempList)
+              }}>
+                <div>{t('common.operation.save')}</div>
+              </Button>
+            </div>
+          ) : (
+            <Button variant='ghost' size='small' onClick={() => {
+              setTempList(list)
+              setIsEdit(true)
+            }}>
+              <RiEditLine className='mr-1 size-3.5 text-text-tertiary cursor-pointer' />
+              <div>{t('common.operation.edit')}</div>
+            </Button>
+          )}
           isEdit={isEdit}
+          contentClassName='mt-5'
           onChange={(item) => {
-            const newList = list.map(i => (i.name === item.name ? item : i))
+            const newList = tempList.map(i => (i.name === item.name ? item : i))
             setList(newList)
           }}
           onDelete={(item) => {
-            const newList = list.filter(i => i.name !== item.name)
+            const newList = tempList.filter(i => i.name !== item.name)
             setList(newList)
           }}
           onAdd={() => {

web/app/components/datasets/metadata/metadata-document/info-group.tsx

@@ -6,11 +6,13 @@ import Field from './field'
 import InputCombined from '../edit-metadata-batch/input-combined'
 import { RiDeleteBinLine } from '@remixicon/react'
 import Tooltip from '@/app/components/base/tooltip'
+import cn from '@/utils/classnames'
 
 type Props = {
   title: string
   titleTooltip?: string
   headerRight?: React.ReactNode
+  contentClassName?: string
   list: MetadataItemWithValue[]
   isEdit?: boolean
   onChange?: (item: MetadataItemWithValue) => void
@@ -22,6 +24,7 @@ const InfoGroup: FC<Props> = ({
   title,
   titleTooltip,
   headerRight,
+  contentClassName,
   list,
   isEdit,
   onChange,
@@ -41,7 +44,7 @@ const InfoGroup: FC<Props> = ({
         {/* <div className='flex px-1.5 rounded-md hover:bg-components-button-tertiary-bg-hover items-center h-6 space-x-1 cursor-pointer' onClick={() => setIsEdit(true)}>
         </div> */}
       </div>
-      <div className='space-y-1'>
+      <div className={cn('mt-3 space-y-1', contentClassName)}>
         {list.map((item, i) => (
           <Field key={item.id || `${i}`} label={item.name}>
             {isEdit ? (
@@ -52,11 +55,11 @@ const InfoGroup: FC<Props> = ({
                   value={item.value}
                   onChange={value => onChange?.({ ...item, value })}
                 />
-                <div className='shrink-0 p-1 rounded-md text-text-tertiary hover:text-text-destructive hover:bg-state-destructive-hover cursor-pointer'>
+                <div className='shrink-0 p-1 rounded-md text-text-tertiary  hover:text-text-destructive hover:bg-state-destructive-hover cursor-pointer'>
                   <RiDeleteBinLine className='size-4' />
                 </div>
               </div>
-            ) : (<div className='system-xs-regular text-text-secondary'>{item.value}</div>)}
+            ) : (<div className='py-1 system-xs-regular text-text-secondary'>{item.value}</div>)}
           </Field>
         ))}
       </div>