feat: add popup

web/app/(commonLayout)/datasets/Container.tsx

@@ -20,6 +20,7 @@ import Button from '@/app/components/base/button'
 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 EditMetadataBatchModal from '@/app/components/datasets/metadata/edit-metadata-batch/modal'
 // import DatasetMetadataDrawer from '@/app/components/datasets/metadata/dataset-metadata-drawer'
 import MetaDataDocument from '@/app/components/datasets/metadata/metadata-document'
 // Services
@@ -111,7 +112,7 @@ const Container = () => {
           onIsBuiltInEnabledChange={setIsBuiltInEnabled}
           onClose={() => { }}
         /> */}
-        {/* <EditMetadataBatchModal
+        <EditMetadataBatchModal
           documentNum={20}
           list={[
             {
@@ -124,12 +125,12 @@ const Container = () => {
               id: '2.1', name: 'num v', type: DataType.number, value: 10,
             },
             {
-              id: '3', name: 'name3', type: DataType.time, value: '', isUpdated: true, updateType: UpdateType.delete,
+              id: '3', name: 'name3', type: DataType.time, value: '', isUpdated: true, // updateType: UpdateType.delete,
             },
           ]}
           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

web/app/components/datasets/metadata/add-metadata-button.tsx

@@ -0,0 +1,29 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import Button from '../../base/button'
+import { RiAddLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+
+type Props = {
+  className?: string
+  onClick?: () => void
+}
+
+const AddedMetadataButton: FC<Props> = ({
+  className,
+  onClick,
+}) => {
+  return (
+    <Button
+      className={cn('w-full flex items-center', className)}
+      size='small'
+      variant='tertiary'
+      onClick={onClick}
+    >
+      <RiAddLine className='mr-1 size-3.5' />
+      <div>Add metadata</div>
+    </Button>
+  )
+}
+export default React.memo(AddedMetadataButton)

web/app/components/datasets/metadata/edit-metadata-batch/modal.tsx

@@ -10,8 +10,9 @@ import { useTranslation } from 'react-i18next'
 import Checkbox from '../../../base/checkbox'
 import Tooltip from '../../../base/tooltip'
 import SelectMetadataModal from '../select-metadata-modal'
-import { RiAddLine, RiQuestionLine } from '@remixicon/react'
+import { RiQuestionLine } from '@remixicon/react'
 import Divider from '@/app/components/base/divider'
+import AddMetadataButton from '../add-metadata-button'
 
 type Props = {
   documentNum: number
@@ -99,11 +100,10 @@ const EditMetadataBatchModal: FC<Props> = ({
         </div>
         <div className='mt-3'>
           <SelectMetadataModal
+            popupPlacement='top-start'
+            popupOffset={{ mainAxis: 4, crossAxis: 0 }}
             trigger={
-              <Button className='w-full flex items-center' size='small' variant='tertiary'>
+              <AddMetadataButton />
-                <RiAddLine className='mr-1 size-3.5' />
-                <div>Add metadata</div>
-              </Button>
             }
             onSave={data => setAddedList([...addedList, data])}
           />

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

@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next'
 
 const MetadataDocument: FC = () => {
   const { t } = useTranslation()
-  const [isEdit, setIsEdit] = useState(false)
+  const [isEdit, setIsEdit] = useState(true)
 
   const [list, setList] = useState<MetadataItemWithValue[]>([
     {

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

@@ -7,6 +7,9 @@ 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'
+import Divider from '@/app/components/base/divider'
+import SelectMetadataModal from '../select-metadata-modal'
+import AddMetadataButton from '../add-metadata-button'
 
 type Props = {
   title: string
@@ -32,7 +35,7 @@ const InfoGroup: FC<Props> = ({
   onAdd,
 }) => {
   return (
-    <div>
+    <div className='bg-white'>
       <div className='flex items-center justify-between'>
         <div className='flex items-center space-x-1'>
           <div className='system-xs-medium text-text-secondary'>{title}</div>
@@ -45,6 +48,17 @@ const InfoGroup: FC<Props> = ({
         </div> */}
       </div>
       <div className={cn('mt-3 space-y-1', contentClassName)}>
+        {isEdit && (
+          <div>
+            <SelectMetadataModal
+              trigger={
+                <AddMetadataButton />
+              }
+              onSave={() => { }}
+            />
+            <Divider className='my-3 ' bgStyle='gradient' />
+          </div>
+        )}
         {list.map((item, i) => (
           <Field key={item.id || `${i}`} label={item.name}>
             {isEdit ? (

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

@@ -6,12 +6,14 @@ import CreateContent from './create-content'
 import SelectMetadata from './select-metadata'
 import { PortalToFollowElem, PortalToFollowElemContent, PortalToFollowElemTrigger } from '../../base/portal-to-follow-elem'
 import type { MetadataItem } from './types'
+import type { Placement } from '@floating-ui/react'
 import { DataType } from './types'
 
 type Props = {
+  popupPlacement?: Placement
+  popupOffset?: { mainAxis: number, crossAxis: number }
   onSave: (data: any) => void
   trigger: React.ReactNode
-  popupLeft?: number
 } & CreateContentProps
 
 enum Step {
@@ -26,8 +28,9 @@ const testMetadataList: MetadataItem[] = [
 ]
 
 const SelectMetadataModal: FC<Props> = ({
+  popupPlacement = 'left-start',
+  popupOffset = { mainAxis: -38, crossAxis: 4 },
   trigger,
-  popupLeft = 4,
   onSave,
 }) => {
   const [open, setOpen] = useState(false)
@@ -41,11 +44,8 @@ const SelectMetadataModal: FC<Props> = ({
     <PortalToFollowElem
       open={open}
       onOpenChange={setOpen}
-      placement='left-start'
+      placement={popupPlacement}
-      offset={{
+      offset={popupOffset}
-        mainAxis: popupLeft,
-        crossAxis: -38,
-      }}
     >
       <PortalToFollowElemTrigger
         onClick={() => setOpen(!open)}