From 651547c3ef2ee7630d98af8fd89fd3f79b57cde8 Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Thu, 22 Aug 2024 10:49:56 +0800
Subject: [PATCH] fix: number var picker and other tiny css problem

---
 .../nodes/_base/components/variable-tag.tsx       |  4 +++-
 .../components/condition-list/condition-item.tsx  | 15 +++++++++++++--
 .../if-else/components/condition-list/index.tsx   |  8 ++++++++
 .../if-else/components/condition-number-input.tsx |  9 ++++++---
 4 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/web/app/components/workflow/nodes/_base/components/variable-tag.tsx b/web/app/components/workflow/nodes/_base/components/variable-tag.tsx
index 6edda1d7e8..c838f32a55 100644
--- a/web/app/components/workflow/nodes/_base/components/variable-tag.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable-tag.tsx
@@ -17,10 +17,12 @@ import cn from '@/utils/classnames'
 type VariableTagProps = {
   valueSelector: ValueSelector
   varType: VarType
+  isShort?: boolean
 }
 const VariableTag = ({
   valueSelector,
   varType,
+  isShort,
 }: VariableTagProps) => {
   const nodes = useNodes<CommonNodeType>()
   const node = useMemo(() => {
@@ -63,7 +65,7 @@ const VariableTag = ({
         {variableName}
       </div>
       {
-        varType && (
+        !isShort && varType && (
           <div className='shrink-0 ml-0.5 text-text-tertiary'>{capitalize(varType)}</div>
         )
       }
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
index ca6df5e0b6..012e72c101 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/condition-item.tsx
@@ -45,7 +45,7 @@ type ConditionItemProps = {
   condition: Condition // condition may the condition of case or condition of sub variable
   file?: { key: string }
   isSubVariableKey?: boolean
-  subVariableKeyCaseId?: string
+  isValueFieldShort?: boolean
   onRemoveCondition?: HandleRemoveCondition
   onUpdateCondition?: HandleUpdateCondition
   onAddSubVariableCondition?: HandleAddSubVariableCondition
@@ -66,6 +66,7 @@ const ConditionItem = ({
   condition,
   file,
   isSubVariableKey,
+  isValueFieldShort,
   onRemoveCondition,
   onUpdateCondition,
   onAddSubVariableCondition,
@@ -89,6 +90,15 @@ const ConditionItem = ({
       onUpdateCondition?.(caseId, condition.id, newCondition)
   }, [caseId, condition, conditionId, isSubVariableKey, onUpdateCondition, onUpdateSubVariableCondition])
 
+  const canChooseOperator = useMemo(() => {
+    if (disabled)
+      return false
+
+    if (isSubVariableKey)
+      return !!condition.key
+
+    return true
+  }, [condition.key, disabled, isSubVariableKey])
   const handleUpdateConditionOperator = useCallback((value: ComparisonOperator) => {
     const newCondition = {
       ...condition,
@@ -218,7 +228,7 @@ const ConditionItem = ({
           </div>
           <div className='mx-1 w-[1px] h-3 bg-divider-regular'></div>
           <ConditionOperator
-            disabled={disabled}
+            disabled={!canChooseOperator}
             varType={condition.varType}
             value={condition.comparison_operator}
             onSelect={handleUpdateConditionOperator}
@@ -247,6 +257,7 @@ const ConditionItem = ({
                 value={condition.value}
                 onValueChange={handleUpdateConditionValue}
                 variables={numberVariables}
+                isShort={isValueFieldShort}
               />
             </div>
           )
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx b/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx
index 58c69d8323..05b5df4f4a 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-list/index.tsx
@@ -68,6 +68,12 @@ const ConditionList = ({
       onToggleConditionLogicalOperator?.(caseId)
   }, [caseId, conditionId, isSubVariable, onToggleConditionLogicalOperator, onToggleSubVariableConditionLogicalOperator])
 
+  const isValueFieldShort = useMemo(() => {
+    if (isSubVariable && conditions.length > 1)
+      return true
+
+    return false
+  }, [conditions.length, isSubVariable])
   const conditionItemClassName = useMemo(() => {
     if (!isSubVariable)
       return ''
@@ -75,6 +81,7 @@ const ConditionList = ({
       return ''
     return logical_operator === LogicalOperator.and ? 'pl-[51px]' : 'pl-[42px]'
   }, [conditions.length, isSubVariable, logical_operator])
+
   return (
     <div className={cn('relative', !isSubVariable && 'pl-[60px]')}>
       {
@@ -105,6 +112,7 @@ const ConditionList = ({
             caseId={caseId}
             conditionId={isSubVariable ? conditionId! : condition.id}
             condition={condition}
+            isValueFieldShort={isValueFieldShort}
             onUpdateCondition={onUpdateCondition}
             onRemoveCondition={onRemoveCondition}
             onAddSubVariableCondition={onAddSubVariableCondition}
diff --git a/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx b/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
index c8c1616e25..c8ff090aae 100644
--- a/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
+++ b/web/app/components/workflow/nodes/if-else/components/condition-number-input.tsx
@@ -35,6 +35,7 @@ type ConditionNumberInputProps = {
   value: string
   onValueChange: (v: string) => void
   variables: NodeOutPutVar[]
+  isShort?: boolean
 }
 const ConditionNumberInput = ({
   numberVarType = NumberVarType.constant,
@@ -42,6 +43,7 @@ const ConditionNumberInput = ({
   value,
   onValueChange,
   variables,
+  isShort,
 }: ConditionNumberInputProps) => {
   const { t } = useTranslation()
   const [numberVarTypeVisible, setNumberVarTypeVisible] = useState(false)
@@ -111,20 +113,21 @@ const ConditionNumberInput = ({
                     <VariableTag
                       valueSelector={variableTransformer(value) as string[]}
                       varType={VarType.number}
+                      isShort={isShort}
                     />
                   )
                 }
                 {
                   !value && (
                     <div className='flex items-center p-1 h-6 text-components-input-text-placeholder text-[13px]'>
-                      <Variable02 className='mr-1 w-4 h-4' />
-                      {t('workflow.nodes.ifElse.selectVariable')}
+                      <Variable02 className='shrink-0 mr-1 w-4 h-4' />
+                      <div className='w-0 grow truncate'>{t('workflow.nodes.ifElse.selectVariable')}</div>
                     </div>
                   )
                 }
               </PortalToFollowElemTrigger>
               <PortalToFollowElemContent className='z-[1000]'>
-                <div className='w-[296px] bg-components-panel-bg-blur rounded-lg border-[0.5px] border-components-panel-border shadow-lg'>
+                <div className={cn('w-[296px] pt-1 bg-components-panel-bg-blur rounded-lg border-[0.5px] border-components-panel-border shadow-lg', isShort && 'w-[200px]')}>
                   <VarReferenceVars
                     vars={variables}
                     onChange={handleSelectVariable}