fix: remove empty else-if branches and add numbering (#17315)

packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterColumn.tsx

@@ -14,6 +14,7 @@ type WorkflowStepFilterColumnProps = {
   stepFilter: StepFilter;
   stepFilterIndex: number;
   firstFilterLabel?: string;
+  elseIfIndex?: number;
   preventDeletion?: boolean;
 };
 
@@ -29,6 +30,7 @@ export const WorkflowStepFilterColumn = ({
   stepFilter,
   stepFilterIndex,
   firstFilterLabel,
+  elseIfIndex,
   preventDeletion = false,
 }: WorkflowStepFilterColumnProps) => {
   const { readonly } = useContext(WorkflowStepFilterContext);
@@ -42,6 +44,7 @@ export const WorkflowStepFilterColumn = ({
           index={stepFilterIndex}
           stepFilterGroup={stepFilterGroup}
           firstFilterLabel={firstFilterLabel}
+          elseIfIndex={elseIfIndex}
         />
         {shouldShowDropdown && (
           <WorkflowStepFilterOptionsDropdown stepFilterId={stepFilter.id} />

packages/twenty-front/src/modules/workflow/workflow-steps/filters/components/WorkflowStepFilterLogicalOperatorCell.tsx

@@ -8,7 +8,7 @@ import styled from '@emotion/styled';
 import { useLingui } from '@lingui/react/macro';
 import { useContext, useMemo } from 'react';
 import { StepLogicalOperator, type StepFilterGroup } from 'twenty-shared/types';
-import { capitalize } from 'twenty-shared/utils';
+import { capitalize, isDefined } from 'twenty-shared/utils';
 
 const StyledText = styled.div`
   align-items: center;
@@ -17,6 +17,11 @@ const StyledText = styled.div`
   height: ${({ theme }) => theme.spacing(8)};
 `;
 
+const StyledNumber = styled.span`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  margin-right: ${({ theme }) => theme.spacing(1)};
+`;
+
 const StyledContainer = styled.div`
   align-items: start;
   display: flex;
@@ -28,12 +33,14 @@ type WorkflowStepFilterLogicalOperatorCellProps = {
   index: number;
   stepFilterGroup: StepFilterGroup;
   firstFilterLabel?: string;
+  elseIfIndex?: number;
 };
 
 export const WorkflowStepFilterLogicalOperatorCell = ({
   index,
   stepFilterGroup,
   firstFilterLabel,
+  elseIfIndex,
 }: WorkflowStepFilterLogicalOperatorCellProps) => {
   const { readonly } = useContext(WorkflowStepFilterContext);
   const { t } = useLingui();
@@ -69,7 +76,10 @@ export const WorkflowStepFilterLogicalOperatorCell = ({
   return (
     <StyledContainer>
       {index === 0 ? (
-        <StyledText>{firstFilterLabel ?? defaultFirstFilterLabel}</StyledText>
+        <StyledText>
+          {isDefined(elseIfIndex) && <StyledNumber>{elseIfIndex}</StyledNumber>}
+          {firstFilterLabel ?? defaultFirstFilterLabel}
+        </StyledText>
       ) : index === 1 ? (
         readonly ? (
           <Select

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/if-else-action/components/WorkflowEditActionIfElseBody.tsx

@@ -285,6 +285,13 @@ export const WorkflowEditActionIfElseBody = ({
                   totalBranches: branches.length,
                   branch,
                 })}
+                elseIfIndex={
+                  branchIndex > 0 &&
+                  branchIndex < branches.length - 1 &&
+                  isDefined(branch.filterGroupId)
+                    ? branchIndex
+                    : undefined
+                }
                 branchFilterGroup={branchFilterGroup}
                 readonly={isReadonly}
                 onFilterSettingsUpdate={onFilterSettingsUpdate}

packages/twenty-front/src/modules/workflow/workflow-steps/workflow-actions/if-else-action/components/WorkflowIfElseBranchEditor.tsx

@@ -31,6 +31,7 @@ type WorkflowIfElseBranchEditorProps = {
   branch: StepIfElseBranch;
   branchIndex: number;
   branchLabel: MessageDescriptor;
+  elseIfIndex?: number;
   branchFilterGroup: StepFilterGroup | undefined;
   readonly: boolean;
   onFilterSettingsUpdate: (filterSettings: FilterSettings) => Promise<void>;
@@ -41,6 +42,7 @@ export const WorkflowIfElseBranchEditor = ({
   branch,
   branchIndex,
   branchLabel,
+  elseIfIndex,
   branchFilterGroup,
   readonly,
   onFilterSettingsUpdate,
@@ -111,6 +113,7 @@ export const WorkflowIfElseBranchEditor = ({
                     firstFilterLabel={capitalize(
                       i18n._(branchLabel).toLowerCase(),
                     )}
+                    elseIfIndex={elseIfIndex}
                     preventDeletion={preventDeletion}
                   />
                 );