From 581228be741e432e4834148b908f87a86ffc89fd Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 16 Aug 2024 10:14:43 +0800
Subject: [PATCH] feat: abstract condition logic to components

---
 .../if-else/components/condition-wrap.tsx     | 147 ++++++++++++++++++
 .../workflow/nodes/if-else/panel.tsx          | 112 ++-----------
 .../workflow/nodes/if-else/use-config.ts      |   4 +-
 3 files changed, 166 insertions(+), 97 deletions(-)
 create mode 100644 web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx

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
new file mode 100644
index 0000000000..a535b549e0
--- /dev/null
+++ b/web/app/components/workflow/nodes/if-else/components/condition-wrap.tsx
@@ -0,0 +1,147 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ReactSortable } from 'react-sortablejs'
+import {
+  RiDeleteBinLine,
+  RiDraggable,
+} from '@remixicon/react'
+import type { CaseItem, HandleAddCondition, HandleRemoveCondition, HandleUpdateCondition, HandleUpdateConditionLogicalOperator } from '../types'
+import type { Node, NodeOutPutVar, Var } from '../../../types'
+import { VarType } from '../../../types'
+import { useGetAvailableVars } from '../../variable-assigner/hooks'
+import ConditionList from './condition-list'
+import ConditionAdd from './condition-add'
+import cn from '@/utils/classnames'
+import Button from '@/app/components/base/button'
+
+type Props = {
+  nodeId: string
+  cases: CaseItem[]
+  readOnly: boolean
+  handleSortCase?: (sortedCases: (CaseItem & { id: string })[]) => void
+  handleRemoveCase: (caseId: string) => void
+  handleAddCondition: HandleAddCondition
+  handleUpdateCondition: HandleUpdateCondition
+  handleRemoveCondition: HandleRemoveCondition
+  handleUpdateConditionLogicalOperator: HandleUpdateConditionLogicalOperator
+  nodesOutputVars: NodeOutPutVar[]
+  availableNodes: Node[]
+  varsIsVarFileAttribute: Record<string, boolean>
+  filterVar: (varPayload: Var) => boolean
+}
+
+const ConditionWrap: FC<Props> = ({
+  nodeId: id,
+  cases,
+  readOnly,
+  handleSortCase,
+  handleUpdateCondition,
+  handleRemoveCondition,
+  handleUpdateConditionLogicalOperator,
+  nodesOutputVars,
+  availableNodes,
+  varsIsVarFileAttribute,
+  filterVar,
+  handleAddCondition,
+  handleRemoveCase,
+}) => {
+  const { t } = useTranslation()
+
+  const getAvailableVars = useGetAvailableVars()
+
+  const [willDeleteCaseId, setWillDeleteCaseId] = useState('')
+  const casesLength = cases.length
+
+  const filterNumberVar = useCallback((varPayload: Var) => {
+    return varPayload.type === VarType.number
+  }, [])
+
+  return (
+    <ReactSortable
+      list={cases.map(caseItem => ({ ...caseItem, id: caseItem.case_id }))}
+      setList={handleSortCase}
+      handle='.handle'
+      ghostClass='bg-components-panel-bg'
+      animation={150}
+    >
+      {
+        cases.map((item, index) => (
+          <div key={item.case_id}>
+            <div
+              className={cn(
+                'group relative py-1 px-3 min-h-[40px] rounded-[10px] bg-components-panel-bg',
+                willDeleteCaseId === item.case_id && 'bg-state-destructive-hover',
+              )}
+            >
+              <RiDraggable className={cn(
+                'hidden handle absolute top-2 left-1 w-3 h-3 text-text-quaternary cursor-pointer',
+                casesLength > 1 && 'group-hover:block',
+              )} />
+              <div className={cn(
+                'absolute left-4 leading-4 text-[13px] font-semibold text-text-secondary',
+                casesLength === 1 ? 'top-2.5' : 'top-1',
+              )}>
+                {
+                  index === 0 ? 'IF' : 'ELIF'
+                }
+                {
+                  casesLength > 1 && (
+                    <div className='text-[10px] text-text-tertiary font-medium'>CASE {index + 1}</div>
+                  )
+                }
+              </div>
+              {
+                !!item.conditions.length && (
+                  <div className='mb-2'>
+                    <ConditionList
+                      disabled={readOnly}
+                      caseItem={item}
+                      onUpdateCondition={handleUpdateCondition}
+                      onRemoveCondition={handleRemoveCondition}
+                      onUpdateConditionLogicalOperator={handleUpdateConditionLogicalOperator}
+                      nodesOutputVars={nodesOutputVars}
+                      availableNodes={availableNodes}
+                      numberVariables={getAvailableVars(id, '', filterNumberVar)}
+                      varsIsVarFileAttribute={varsIsVarFileAttribute}
+                    />
+                  </div>
+                )
+              }
+              <div className={cn(
+                'flex items-center justify-between pl-[60px] pr-[30px]',
+                !item.conditions.length && 'mt-1',
+              )}>
+                <ConditionAdd
+                  disabled={readOnly}
+                  caseId={item.case_id}
+                  variables={getAvailableVars(id, '', filterVar)}
+                  onSelectVariable={handleAddCondition}
+                />
+                {
+                  ((index === 0 && casesLength > 1) || (index > 0)) && (
+                    <Button
+                      className='hover:text-components-button-destructive-ghost-text hover:bg-components-button-destructive-ghost-bg-hover'
+                      size='small'
+                      variant='ghost'
+                      disabled={readOnly}
+                      onClick={() => handleRemoveCase(item.case_id)}
+                      onMouseEnter={() => setWillDeleteCaseId(item.case_id)}
+                      onMouseLeave={() => setWillDeleteCaseId('')}
+                    >
+                      <RiDeleteBinLine className='mr-1 w-3.5 h-3.5' />
+                      {t('common.operation.remove')}
+                    </Button>
+                  )
+                }
+              </div>
+            </div>
+            <div className='my-2 mx-3 h-[1px] bg-divider-subtle'></div>
+          </div>
+        ))
+      }
+    </ReactSortable>
+  )
+}
+export default React.memo(ConditionWrap)
diff --git a/web/app/components/workflow/nodes/if-else/panel.tsx b/web/app/components/workflow/nodes/if-else/panel.tsx
index 111219118d..ba30f9be0d 100644
--- a/web/app/components/workflow/nodes/if-else/panel.tsx
+++ b/web/app/components/workflow/nodes/if-else/panel.tsx
@@ -1,24 +1,18 @@
 import type { FC } from 'react'
 import {
   memo,
-  useState,
 } from 'react'
 import { useTranslation } from 'react-i18next'
-import { ReactSortable } from 'react-sortablejs'
 import {
   RiAddLine,
-  RiDeleteBinLine,
-  RiDraggable,
 } from '@remixicon/react'
 import useConfig from './use-config'
-import ConditionAdd from './components/condition-add'
-import ConditionList from './components/condition-list'
 import type { IfElseNodeType } from './types'
+import ConditionWrap from './components/condition-wrap'
 import Button from '@/app/components/base/button'
 import type { NodePanelProps } from '@/app/components/workflow/types'
 import Field from '@/app/components/workflow/nodes/_base/components/field'
-import { useGetAvailableVars } from '@/app/components/workflow/nodes/variable-assigner/hooks'
-import cn from '@/utils/classnames'
+
 const i18nPrefix = 'workflow.nodes.ifElse'
 
 const Panel: FC<NodePanelProps<IfElseNodeType>> = ({
@@ -26,12 +20,10 @@ const Panel: FC<NodePanelProps<IfElseNodeType>> = ({
   data,
 }) => {
   const { t } = useTranslation()
-  const getAvailableVars = useGetAvailableVars()
   const {
     readOnly,
     inputs,
     filterVar,
-    filterNumberVar,
     handleAddCase,
     handleRemoveCase,
     handleSortCase,
@@ -43,95 +35,25 @@ const Panel: FC<NodePanelProps<IfElseNodeType>> = ({
     availableNodes,
     varsIsVarFileAttribute,
   } = useConfig(id, data)
-  const [willDeleteCaseId, setWillDeleteCaseId] = useState('')
   const cases = inputs.cases || []
-  const casesLength = cases.length
 
   return (
     <div className='p-1'>
-      <ReactSortable
-        list={cases.map(caseItem => ({ ...caseItem, id: caseItem.case_id }))}
-        setList={handleSortCase}
-        handle='.handle'
-        ghostClass='bg-components-panel-bg'
-        animation={150}
-      >
-        {
-          cases.map((item, index) => (
-            <div key={item.case_id}>
-              <div
-                className={cn(
-                  'group relative py-1 px-3 min-h-[40px] rounded-[10px] bg-components-panel-bg',
-                  willDeleteCaseId === item.case_id && 'bg-state-destructive-hover',
-                )}
-              >
-                <RiDraggable className={cn(
-                  'hidden handle absolute top-2 left-1 w-3 h-3 text-text-quaternary cursor-pointer',
-                  casesLength > 1 && 'group-hover:block',
-                )} />
-                <div className={cn(
-                  'absolute left-4 leading-4 text-[13px] font-semibold text-text-secondary',
-                  casesLength === 1 ? 'top-2.5' : 'top-1',
-                )}>
-                  {
-                    index === 0 ? 'IF' : 'ELIF'
-                  }
-                  {
-                    casesLength > 1 && (
-                      <div className='text-[10px] text-text-tertiary font-medium'>CASE {index + 1}</div>
-                    )
-                  }
-                </div>
-                {
-                  !!item.conditions.length && (
-                    <div className='mb-2'>
-                      <ConditionList
-                        disabled={readOnly}
-                        caseItem={item}
-                        onUpdateCondition={handleUpdateCondition}
-                        onRemoveCondition={handleRemoveCondition}
-                        onUpdateConditionLogicalOperator={handleUpdateConditionLogicalOperator}
-                        nodesOutputVars={nodesOutputVars}
-                        availableNodes={availableNodes}
-                        numberVariables={getAvailableVars(id, '', filterNumberVar)}
-                        varsIsVarFileAttribute={varsIsVarFileAttribute}
-                      />
-                    </div>
-                  )
-                }
-                <div className={cn(
-                  'flex items-center justify-between pl-[60px] pr-[30px]',
-                  !item.conditions.length && 'mt-1',
-                )}>
-                  <ConditionAdd
-                    disabled={readOnly}
-                    caseId={item.case_id}
-                    variables={getAvailableVars(id, '', filterVar)}
-                    onSelectVariable={handleAddCondition}
-                  />
-                  {
-                    ((index === 0 && casesLength > 1) || (index > 0)) && (
-                      <Button
-                        className='hover:text-components-button-destructive-ghost-text hover:bg-components-button-destructive-ghost-bg-hover'
-                        size='small'
-                        variant='ghost'
-                        disabled={readOnly}
-                        onClick={() => handleRemoveCase(item.case_id)}
-                        onMouseEnter={() => setWillDeleteCaseId(item.case_id)}
-                        onMouseLeave={() => setWillDeleteCaseId('')}
-                      >
-                        <RiDeleteBinLine className='mr-1 w-3.5 h-3.5' />
-                        {t('common.operation.remove')}
-                      </Button>
-                    )
-                  }
-                </div>
-              </div>
-              <div className='my-2 mx-3 h-[1px] bg-divider-subtle'></div>
-            </div>
-          ))
-        }
-      </ReactSortable>
+      <ConditionWrap
+        nodeId={id}
+        cases={cases}
+        readOnly={readOnly}
+        handleSortCase={handleSortCase}
+        handleRemoveCase={handleRemoveCase}
+        handleAddCondition={handleAddCondition}
+        handleUpdateCondition={handleUpdateCondition}
+        handleRemoveCondition={handleRemoveCondition}
+        handleUpdateConditionLogicalOperator={handleUpdateConditionLogicalOperator}
+        nodesOutputVars={nodesOutputVars}
+        availableNodes={availableNodes}
+        varsIsVarFileAttribute={varsIsVarFileAttribute}
+        filterVar={filterVar}
+      />
       <div className='px-4 py-2'>
         <Button
           className='w-full'
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 c6dcec3d37..99eeedca07 100644
--- a/web/app/components/workflow/nodes/if-else/use-config.ts
+++ b/web/app/components/workflow/nodes/if-else/use-config.ts
@@ -31,8 +31,8 @@ const useConfig = (id: string, payload: IfElseNodeType) => {
   const { handleEdgeDeleteByDeleteBranch } = useEdgesInteractions()
   const { inputs, setInputs } = useNodeCrud<IfElseNodeType>(id, payload)
 
-  const filterVar = useCallback((varPayload: Var) => {
-    return varPayload.type !== VarType.arrayFile
+  const filterVar = useCallback(() => {
+    return true
   }, [])
 
   const {