From 66953d57a2848f245fae715d77e3ee39233fcf89 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Tue, 24 Sep 2024 11:59:33 +0800
Subject: [PATCH] chore: use new add sub variables

---
 web/app/components/base/select/index.tsx      | 37 ++++++++++++-------
 .../if-else/components/condition-wrap.tsx     | 31 ++++++++++++----
 .../workflow/nodes/if-else/types.ts           |  2 +-
 .../workflow/nodes/if-else/use-config.ts      |  4 +-
 4 files changed, 50 insertions(+), 24 deletions(-)

diff --git a/web/app/components/base/select/index.tsx b/web/app/components/base/select/index.tsx
index aa83d06a43..d701f47cd0 100644
--- a/web/app/components/base/select/index.tsx
+++ b/web/app/components/base/select/index.tsx
@@ -289,20 +289,26 @@ type PortalSelectProps = {
   onSelect: (value: Item) => void
   items: Item[]
   placeholder?: string
+  renderTrigger?: (value?: Item) => JSX.Element | null
   triggerClassName?: string
   triggerClassNameFn?: (open: boolean) => string
   popupClassName?: string
+  popupInnerClassName?: string
   readonly?: boolean
+  hideChecked?: boolean
 }
 const PortalSelect: FC<PortalSelectProps> = ({
   value,
   onSelect,
   items,
   placeholder,
+  renderTrigger,
   triggerClassName,
   triggerClassNameFn,
   popupClassName,
+  popupInnerClassName,
   readonly,
+  hideChecked,
 }) => {
   const { t } = useTranslation()
   const [open, setOpen] = useState(false)
@@ -317,26 +323,31 @@ const PortalSelect: FC<PortalSelectProps> = ({
       offset={4}
     >
       <PortalToFollowElemTrigger onClick={() => !readonly && setOpen(v => !v)} className='w-full'>
-        <div
-          className={classNames(`
+        {renderTrigger
+          ? renderTrigger(selectedItem)
+          : (
+            <div
+              className={classNames(`
             flex items-center justify-between px-2.5 h-9 rounded-lg border-0 bg-gray-100 text-sm ${readonly ? 'cursor-not-allowed' : 'cursor-pointer'} 
           `, triggerClassName, triggerClassNameFn?.(open))}
-          title={selectedItem?.name}
-        >
-          <span
-            className={`
+              title={selectedItem?.name}
+            >
+              <span
+                className={`
               grow truncate
               ${!selectedItem?.name && 'text-gray-400'}
             `}
-          >
-            {selectedItem?.name ?? localPlaceholder}
-          </span>
-          <ChevronDownIcon className='shrink-0 h-4 w-4 text-gray-400' />
-        </div>
+              >
+                {selectedItem?.name ?? localPlaceholder}
+              </span>
+              <ChevronDownIcon className='shrink-0 h-4 w-4 text-gray-400' />
+            </div>
+          )}
+
       </PortalToFollowElemTrigger>
       <PortalToFollowElemContent className={`z-20 ${popupClassName}`}>
         <div
-          className='px-1 py-1 max-h-60 overflow-auto rounded-md bg-white text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm'
+          className={classNames('px-1 py-1 max-h-60 overflow-auto rounded-md bg-white text-base shadow-lg border-gray-200 border-[0.5px] focus:outline-none sm:text-sm', popupInnerClassName)}
         >
           {items.map((item: Item) => (
             <div
@@ -357,7 +368,7 @@ const PortalSelect: FC<PortalSelectProps> = ({
               >
                 {item.name}
               </span>
-              {item.value === value && (
+              {!hideChecked && item.value === value && (
                 <CheckIcon className='shrink-0 h-4 w-4 text-text-accent' />
               )}
             </div>
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
index 3d7a2475ce..39c03c9b38 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
@@ -12,10 +12,12 @@ import type { CaseItem, HandleAddCondition, HandleAddSubVariableCondition, Handl
 import type { Node, NodeOutPutVar, Var } from '../../../types'
 import { VarType } from '../../../types'
 import { useGetAvailableVars } from '../../variable-assigner/hooks'
+import { SUB_VARIABLES } from '../default'
 import ConditionList from './condition-list'
 import ConditionAdd from './condition-add'
 import cn from '@/utils/classnames'
 import Button from '@/app/components/base/button'
+import { PortalSelect as Select } from '@/app/components/base/select'
 
 type Props = {
   isSubVariable?: boolean
@@ -73,6 +75,11 @@ const ConditionWrap: FC<Props> = ({
     return varPayload.type === VarType.number
   }, [])
 
+  const subVarOptions = SUB_VARIABLES.map(item => ({
+    name: item,
+    value: item,
+  }))
+
   return (
     <>
       <ReactSortable
@@ -151,14 +158,22 @@ const ConditionWrap: FC<Props> = ({
                 )}>
                   {isSubVariable
                     ? (
-                      <Button
-                        size='small'
-                        disabled={readOnly}
-                        onClick={() => handleAddSubVariableCondition?.(caseId!, conditionId!)}
-                      >
-                        <RiAddLine className='mr-1 w-3.5 h-3.5' />
-                        {t('workflow.nodes.ifElse.addSubVariable')}
-                      </Button>
+                      <Select
+                        popupInnerClassName='w-[165px] max-h-none'
+                        onSelect={value => handleAddSubVariableCondition?.(caseId!, conditionId!, value.value as string)}
+                        items={subVarOptions}
+                        value=''
+                        renderTrigger={() => (
+                          <Button
+                            size='small'
+                            disabled={readOnly}
+                          >
+                            <RiAddLine className='mr-1 w-3.5 h-3.5' />
+                            {t('workflow.nodes.ifElse.addSubVariable')}
+                          </Button>
+                        )}
+                        hideChecked
+                      />
                     )
                     : (
                       <ConditionAdd
diff --git a/web/app/components/workflow/nodes/if-else/types.ts b/web/app/components/workflow/nodes/if-else/types.ts
index 9b4097a3da..84a3924b8b 100644
--- a/web/app/components/workflow/nodes/if-else/types.ts
+++ b/web/app/components/workflow/nodes/if-else/types.ts
@@ -64,7 +64,7 @@ export type HandleRemoveCondition = (caseId: string, conditionId: string) => voi
 export type HandleUpdateCondition = (caseId: string, conditionId: string, newCondition: Condition) => void
 export type HandleToggleConditionLogicalOperator = (caseId: string) => void
 
-export type HandleAddSubVariableCondition = (caseId: string, conditionId: string) => void
+export type HandleAddSubVariableCondition = (caseId: string, conditionId: string, key?: string) => void
 export type handleRemoveSubVariableCondition = (caseId: string, conditionId: string, subConditionId: string) => void
 export type HandleUpdateSubVariableCondition = (caseId: string, conditionId: string, subConditionId: string, newSubCondition: Condition) => void
 export type HandleToggleSubVariableConditionLogicalOperator = (caseId: string, conditionId: string) => void
diff --git a/web/app/components/workflow/nodes/if-else/use-config.ts b/web/app/components/workflow/nodes/if-else/use-config.ts
index 3030d74d74..d1210431a0 100644
--- a/web/app/components/workflow/nodes/if-else/use-config.ts
+++ b/web/app/components/workflow/nodes/if-else/use-config.ts
@@ -180,7 +180,7 @@ const useConfig = (id: string, payload: IfElseNodeType) => {
     setInputs(newInputs)
   }, [inputs, setInputs])
 
-  const handleAddSubVariableCondition = useCallback<HandleAddSubVariableCondition>((caseId: string, conditionId: string) => {
+  const handleAddSubVariableCondition = useCallback<HandleAddSubVariableCondition>((caseId: string, conditionId: string, key?: string) => {
     const newInputs = produce(inputs, (draft) => {
       const condition = draft.cases?.find(item => item.case_id === caseId)?.conditions.find(item => item.id === conditionId)
       if (!condition)
@@ -199,7 +199,7 @@ const useConfig = (id: string, payload: IfElseNodeType) => {
 
         subVarCondition.conditions.push({
           id: uuid4(),
-          key: '',
+          key: key || '',
           varType: VarType.string,
           comparison_operator: undefined,
           value: '',