feat: select metadata

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

@@ -21,6 +21,7 @@ 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 CreateModal from '@/app/components/datasets/metadata/create-metadata-modal'
+import SelectMetadataModal from '@/app/components/datasets/metadata/select-metadata-modal'
 // Services
 import { fetchDatasetApiBaseUrl } from '@/service/datasets'
 
@@ -84,7 +85,8 @@ const Container = () => {
   return (
     <div ref={containerRef} className='grow relative flex flex-col bg-background-body overflow-y-auto scroll-container'>
       <div className='ml-[600px] mt-[300px]'>
-        <CreateModal trigger={<Button className='w-[200px]'>open</Button>} hasBack onSave={(data) => { console.log(data) }} />
+        <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) }} />
       </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/select-metadata-modal.tsx

@@ -0,0 +1,70 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import type { Props as CreateContentProps } from './create-content'
+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 { DataType } from './types'
+
+type Props = {
+  onSave: (data: any) => void
+  trigger: React.ReactNode
+  popupLeft?: number
+} & CreateContentProps
+
+enum Step {
+  select = 'select',
+  create = 'create',
+}
+
+const testMetadataList: MetadataItem[] = [
+  { id: '1', name: 'name1', type: DataType.string },
+  { id: '2', name: 'name2', type: DataType.number },
+  { id: '3', name: 'name3', type: DataType.time },
+]
+
+const SelectMetadataModal: FC<Props> = ({
+  trigger,
+  popupLeft = 4,
+  onSave,
+}) => {
+  const [open, setOpen] = useState(true)
+  const [step, setStep] = useState(Step.select)
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='left-start'
+      offset={{
+        mainAxis: popupLeft,
+        crossAxis: -38,
+      }}
+    >
+      <PortalToFollowElemTrigger
+        onClick={() => setOpen(!open)}
+      >
+        {trigger}
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[1000]'>
+        {step === Step.select ? (
+          <SelectMetadata
+            onSelect={onSave}
+            list={testMetadataList}
+            onNew={() => setStep(Step.create)}
+            onManage={() => { }}
+          />
+        ) : (
+          <CreateContent
+            onSave={onSave}
+            hasBack
+            onBack={() => setStep(Step.select)}
+          />
+        )}
+      </PortalToFollowElemContent>
+    </PortalToFollowElem >
+
+  )
+}
+export default React.memo(SelectMetadataModal)

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

@@ -0,0 +1,73 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import { DataType } from './types'
+import type { MetadataItem } from './types'
+import SearchInput from '../../base/search-input'
+import { RiAddLine, RiArrowRightUpLine, RiHashtag, RiTextSnippet, RiTimeLine } from '@remixicon/react'
+
+type Props = {
+  list: MetadataItem[]
+  onSelect: (data: any) => void
+  onNew: () => void
+  onManage: () => void
+}
+
+const getIcon = (type: DataType) => {
+  return ({
+    [DataType.string]: RiTextSnippet,
+    [DataType.number]: RiHashtag,
+    [DataType.time]: RiTimeLine,
+  }[type] || RiTextSnippet)
+}
+
+const SelectMetadata: FC<Props> = ({
+  list,
+  onSelect,
+  onNew,
+  onManage,
+}) => {
+  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]'>
+      <SearchInput
+        className='mx-2'
+        value={query}
+        onChange={setQuery}
+        placeholder='Search metadata'
+      />
+      <div className='mt-2'>
+        {list.map((item) => {
+          const Icon = getIcon(item.type)
+          return (
+            <div
+              key={item.id}
+              className='mx-1 flex items-center h-6  px-3 justify-between rounded-md hover:bg-state-base-hover cursor-pointer'
+              onClick={() => onSelect(item)}
+            >
+              <div className='w-0 grow flex items-center h-full text-text-secondary'>
+                <Icon className='shrink-0 mr-[5px] size-3.5' />
+                <div className='w-0 grow truncate system-sm-medium'>{item.name}</div>
+              </div>
+              <div className='ml-1 shrink-0 system-xs-regular text-text-tertiary'>
+                {item.type}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+      <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>
+        <div className='flex items-center h-6 px-1.5 text-text-secondary rounded-md hover:bg-state-base-hover cursor-pointer space-x-1' onClick={onManage}>
+          <div className='mr-[9px] w-px h-3 bg-divider-regular'></div>
+          <div className='mr-1 system-sm-medium'>Manage</div>
+          <RiArrowRightUpLine className='size-3.5' />
+        </div>
+      </div>
+    </div>
+  )
+}
+export default React.memo(SelectMetadata)

web/app/components/datasets/metadata/types.ts

@@ -3,3 +3,9 @@ export enum DataType {
   number = 'number',
   time = 'time',
 }
+
+export type MetadataItem = {
+  id: string
+  type: DataType
+  name: string
+}