From b362031baf7edb9ab1a36e3d341a60b6db2bb991 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Mon, 19 Aug 2024 14:10:08 +0800
Subject: [PATCH] chip

---
 .../components/app/log-annotation/index.tsx   |   2 +-
 .../components/app/workflow-log/filter.tsx    |  48 ++++-----
 web/app/components/app/workflow-log/index.tsx |   4 +-
 web/app/components/app/workflow-log/list.tsx  |   2 +-
 web/app/components/base/chip/index.tsx        | 102 ++++++++++++++++++
 5 files changed, 126 insertions(+), 32 deletions(-)
 create mode 100644 web/app/components/base/chip/index.tsx

diff --git a/web/app/components/app/log-annotation/index.tsx b/web/app/components/app/log-annotation/index.tsx
index 852e57035c..e2e6c14090 100644
--- a/web/app/components/app/log-annotation/index.tsx
+++ b/web/app/components/app/log-annotation/index.tsx
@@ -37,7 +37,7 @@ const LogAnnotation: FC<Props> = ({
   }
 
   return (
-    <div className='pt-4 px-6 h-full flex flex-col'>
+    <div className='pt-3 px-6 h-full flex flex-col'>
       {appDetail.mode !== 'workflow' && (
         <TabSlider
           className='shrink-0'
diff --git a/web/app/components/app/workflow-log/filter.tsx b/web/app/components/app/workflow-log/filter.tsx
index d239c39d2c..9f03c4dc3d 100644
--- a/web/app/components/app/workflow-log/filter.tsx
+++ b/web/app/components/app/workflow-log/filter.tsx
@@ -2,11 +2,9 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import {
-  MagnifyingGlassIcon,
-} from '@heroicons/react/24/solid'
 import type { QueryParam } from './index'
-import { SimpleSelect } from '@/app/components/base/select'
+import Chip from '@/app/components/base/chip'
+import Input from '@/app/components/base/input'
 
 type IFilterProps = {
   queryParams: QueryParam
@@ -16,16 +14,14 @@ type IFilterProps = {
 const Filter: FC<IFilterProps> = ({ queryParams, setQueryParams }: IFilterProps) => {
   const { t } = useTranslation()
   return (
-    <div className='flex flex-row flex-wrap gap-y-2 gap-x-4 items-center mb-4 text-gray-900 text-base'>
+    <div className='flex items-center gap-2 mb-2'>
       <div className="relative rounded-md">
-        <SimpleSelect
-          defaultValue={'all'}
-          className='!min-w-[100px]'
-          onSelect={
-            (item) => {
-              setQueryParams({ ...queryParams, status: item.value as string })
-            }
-          }
+        <Chip
+          value={queryParams.status || 'all'}
+          onSelect={(item) => {
+            setQueryParams({ ...queryParams, status: item.value as string })
+          }}
+          onClear={() => setQueryParams({ ...queryParams, status: 'all' })}
           items={[{ value: 'all', name: 'All' },
             { value: 'succeeded', name: 'Success' },
             { value: 'failed', name: 'Fail' },
@@ -33,21 +29,17 @@ const Filter: FC<IFilterProps> = ({ queryParams, setQueryParams }: IFilterProps)
           ]}
         />
       </div>
-      <div className="relative">
-        <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
-          <MagnifyingGlassIcon className="h-5 w-5 text-gray-400" aria-hidden="true" />
-        </div>
-        <input
-          type="text"
-          name="query"
-          className="block w-[240px] bg-gray-100 shadow-sm rounded-md border-0 py-1.5 pl-10 text-gray-900 placeholder:text-gray-400 focus:ring-1 focus:ring-inset focus:ring-gray-200 focus-visible:outline-none sm:text-sm sm:leading-6"
-          placeholder={t('common.operation.search')!}
-          value={queryParams.keyword}
-          onChange={(e) => {
-            setQueryParams({ ...queryParams, keyword: e.target.value })
-          }}
-        />
-      </div>
+      <Input
+        wrapperClassName='w-[200px]'
+        showLeftIcon
+        showClearIcon
+        value={queryParams.keyword}
+        placeholder={t('common.operation.search')!}
+        onChange={(e) => {
+          setQueryParams({ ...queryParams, keyword: e.target.value })
+        }}
+        onClear={() => setQueryParams({ ...queryParams, keyword: '' })}
+      />
     </div>
   )
 }
diff --git a/web/app/components/app/workflow-log/index.tsx b/web/app/components/app/workflow-log/index.tsx
index 303c2069b2..b7f0d6e3bd 100644
--- a/web/app/components/app/workflow-log/index.tsx
+++ b/web/app/components/app/workflow-log/index.tsx
@@ -73,8 +73,8 @@ const Logs: FC<ILogsProps> = ({ appDetail }) => {
 
   return (
     <div className='flex flex-col h-full'>
-      <h1 className='text-md font-semibold text-gray-900'>{t('appLog.workflowTitle')}</h1>
-      <p className='flex text-sm font-normal text-gray-500'>{t('appLog.workflowSubtitle')}</p>
+      <h1 className='text-text-primary system-xl-semibold'>{t('appLog.workflowTitle')}</h1>
+      <p className='text-text-tertiary system-sm-regular'>{t('appLog.workflowSubtitle')}</p>
       <div className='flex flex-col py-4 flex-1'>
         <Filter queryParams={queryParams} setQueryParams={setQueryParams} />
         {/* workflow log */}
diff --git a/web/app/components/app/workflow-log/list.tsx b/web/app/components/app/workflow-log/list.tsx
index f4707dce59..07fe874263 100644
--- a/web/app/components/app/workflow-log/list.tsx
+++ b/web/app/components/app/workflow-log/list.tsx
@@ -77,7 +77,7 @@ const WorkflowAppLogList: FC<ILogs> = ({ logs, appDetail, onRefresh }) => {
 
   return (
     <div className='overflow-x-auto'>
-      <table className={`w-full min-w-[440px] border-collapse border-0 text-sm mt-3 ${s.logTable}`}>
+      <table className={cn('mt-1 w-full min-w-[440px] border-collapse border-0 text-sm', s.logTable)}>
         <thead className="h-8 !pl-3 py-2 leading-[18px] border-b border-gray-200 text-xs text-gray-500 font-medium">
           <tr>
             <td className='w-[1.375rem] whitespace-nowrap'></td>
diff --git a/web/app/components/base/chip/index.tsx b/web/app/components/base/chip/index.tsx
new file mode 100644
index 0000000000..40af8645a7
--- /dev/null
+++ b/web/app/components/base/chip/index.tsx
@@ -0,0 +1,102 @@
+import type { FC } from 'react'
+import { useMemo, useState } from 'react'
+import { RiArrowDownSLine, RiCheckLine, RiCloseCircleFill, RiFilter3Line } from '@remixicon/react'
+import cn from '@/utils/classnames'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+
+export type Item = {
+  value: number | string
+  name: string
+} & Record<string, any>
+
+type Props = {
+  className?: string
+  value: number | string
+  items: Item[]
+  onSelect: (item: any) => void
+  onClear: () => void
+}
+const Chip: FC<Props> = ({
+  className,
+  value,
+  items,
+  onSelect,
+  onClear,
+}) => {
+  const [open, setOpen] = useState(false)
+
+  const triggerContent = useMemo(() => {
+    return items.find(item => item.value === value)?.name || ''
+  }, [items, value])
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-start'
+      offset={4}
+    >
+      <div className='relative'>
+        <PortalToFollowElemTrigger
+          onClick={() => setOpen(v => !v)}
+          className='block'
+        >
+          <div className={cn(
+            'flex items-center px-2 py-1 rounded-lg border-[0.5px] border-transparent bg-components-input-bg-normal cursor-pointer hover:bg-state-base-hover-alt',
+            open && !value && '!bg-state-base-hover-alt hover:bg-state-base-hover-alt',
+            !open && !!value && '!bg-components-button-secondary-bg shadow-xs !border-components-button-secondary-border hover:!bg-components-button-secondary-bg-hover hover:border-components-button-secondary-border-hover',
+            open && !!value && '!bg-components-button-secondary-bg-hover !border-components-button-secondary-border-hover shadow-xs hover:!bg-components-button-secondary-bg-hover hover:border-components-button-secondary-border-hover',
+            className,
+          )}>
+            <div className='p-0.5'>
+              <RiFilter3Line className={cn('h-4 w-4 text-text-tertiary', !!value && 'text-text-secondary')} />
+            </div>
+            <div className='p-1 flex items-center gap-0.5'>
+              <div className={cn('system-sm-regular text-text-tertiary', !!value && 'text-text-secondary')}>
+                {triggerContent}
+              </div>
+              {/* {value.length > 1 && (
+                <div className='system-xs-medium text-text-tertiary'>{`+${value.length - 1}`}</div>
+              )} */}
+            </div>
+            {!value && <RiArrowDownSLine className='h-4 w-4 text-text-tertiary' />}
+            {!!value && (
+              <div className='p-[1px] cursor-pointer group/clear' onClick={(e) => {
+                e.stopPropagation()
+                onClear()
+              }}>
+                <RiCloseCircleFill className='h-3.5 w-3.5 text-text-quaternary group-hover/clear:text-text-tertiary' />
+              </div>
+            )}
+          </div>
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className='z-[1002]'>
+          <div className='relative w-[240px] bg-components-panel-bg-blur rounded-xl border-[0.5px] border-components-panel-border shadow-lg'>
+            <div className='p-1 max-h-72 overflow-auto'>
+              {items.map(item => (
+                <div
+                  key={item.value}
+                  className='flex items-center gap-2 pl-3 py-[6px] px-2 rounded-lg cursor-pointer hover:bg-state-base-hover'
+                  onClick={() => {
+                    onSelect(item)
+                    setOpen(false)
+                  }}
+                >
+                  <div title={item.name} className='grow text-text-secondary system-sm-medium truncate'>{item.name}</div>
+                  {value === item.value && <RiCheckLine className='shrink-0 w-4 h-4 text-util-colors-blue-light-blue-light-600' />}
+                </div>
+              ))}
+            </div>
+          </div>
+        </PortalToFollowElemContent>
+      </div>
+    </PortalToFollowElem>
+
+  )
+}
+
+export default Chip