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

packages/twenty-front/src/modules/workflow/workflow-diagram/types/WorkflowDiagram.ts

@@ -103,6 +103,7 @@ export type WorkflowRunDiagramNodeData = Exclude<
 export type WorkflowDiagramEdgeLabelOptions = {
   position: Position;
   label: MessageDescriptor;
+  elseIfIndex?: number;
 };
 
 export type WorkflowDiagramEdgePathStrategy =

packages/twenty-front/src/modules/workflow/workflow-diagram/utils/generateNodesAndEdgesForIfElseNode.ts

@@ -76,6 +76,13 @@ export const generateNodesAndEdgesForIfElseNode = ({
       branch,
     });
 
+    const elseIfIndex =
+      branchIndex > 0 &&
+      branchIndex < totalBranches - 1 &&
+      isDefined(branch.filterGroupId)
+        ? branchIndex
+        : undefined;
+
     const nextStepIds = branch.nextStepIds;
     for (const nextStepId of nextStepIds) {
       const nextStep = steps.find((s) => s.id === nextStepId);
@@ -99,6 +106,7 @@ export const generateNodesAndEdgesForIfElseNode = ({
           labelOptions: {
             position: Position.Bottom,
             label,
+            elseIfIndex,
           },
           edgePathStrategy: getEdgePathStrategy({
             step,

packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramDefaultEdgeEditable.tsx

@@ -113,7 +113,10 @@ export const WorkflowDiagramDefaultEdgeEditable = ({
             centerX={labelX}
             centerY={labelY}
           >
-            <WorkflowDiagramEdgeLabel label={i18n._(data.labelOptions.label)} />
+            <WorkflowDiagramEdgeLabel
+              label={i18n._(data.labelOptions.label)}
+              elseIfIndex={data.labelOptions.elseIfIndex}
+            />
           </WorkflowDiagramEdgeLabelContainer>
         )}
 

packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramDefaultEdgeReadonly.tsx

@@ -59,7 +59,10 @@ export const WorkflowDiagramDefaultEdgeReadonly = ({
             centerX={labelX}
             centerY={labelY}
           >
-            <WorkflowDiagramEdgeLabel label={i18n._(data.labelOptions.label)} />
+            <WorkflowDiagramEdgeLabel
+              label={i18n._(data.labelOptions.label)}
+              elseIfIndex={data.labelOptions.elseIfIndex}
+            />
           </WorkflowDiagramEdgeLabelContainer>
         )}
       </EdgeLabelRenderer>

packages/twenty-front/src/modules/workflow/workflow-diagram/workflow-edges/components/WorkflowDiagramEdgeLabel.tsx

@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { isDefined } from 'twenty-shared/utils';
 import { Label } from 'twenty-ui/display';
 
 const StyledContainer = styled.div`
@@ -14,9 +15,23 @@ const StyledContainer = styled.div`
   padding-inline: ${({ theme }) => theme.spacing(1)};
 `;
 
-export const WorkflowDiagramEdgeLabel = ({ label }: { label: string }) => {
+const StyledNumber = styled.span`
+  color: ${({ theme }) => theme.font.color.tertiary};
+  font-size: ${({ theme }) => theme.font.size.sm};
+`;
+
+type WorkflowDiagramEdgeLabelProps = {
+  label: string;
+  elseIfIndex?: number;
+};
+
+export const WorkflowDiagramEdgeLabel = ({
+  label,
+  elseIfIndex,
+}: WorkflowDiagramEdgeLabelProps) => {
   return (
     <StyledContainer>
+      {isDefined(elseIfIndex) && <StyledNumber>{elseIfIndex}</StyledNumber>}
       <Label>{label}</Label>
     </StyledContainer>
   );

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}
                   />
                 );

packages/twenty-server/src/modules/workflow/workflow-builder/workflow-version-step/utils/remove-step.ts

@@ -104,21 +104,46 @@ export const removeStep = ({
               });
             }
 
+            const finalNextStepIds = updatedNextStepIds.filter(
+              (id) => !allRemovedStepIds.includes(id),
+            );
+
             return {
               ...branch,
-              nextStepIds: updatedNextStepIds.filter(
-                (id) => !allRemovedStepIds.includes(id),
-              ),
+              nextStepIds: finalNextStepIds,
             };
           });
 
+          const filteredBranches = updatedBranches.filter(
+            (branch, branchIndex) => {
+              const isIfBranch = branchIndex === 0;
+              const isElseBranch =
+                branchIndex === updatedBranches.length - 1 &&
+                !isDefined(branch.filterGroupId);
+              const isElseIfBranch =
+                branchIndex > 0 &&
+                branchIndex < updatedBranches.length - 1 &&
+                isDefined(branch.filterGroupId);
+
+              if (isIfBranch || isElseBranch) {
+                return true;
+              }
+
+              if (isElseIfBranch && branch.nextStepIds.length === 0) {
+                return false;
+              }
+
+              return true;
+            },
+          );
+
           return {
             ...step,
             settings: {
               ...step.settings,
               input: {
                 ...step.settings.input,
-                branches: updatedBranches,
+                branches: filteredBranches,
               },
             },
           };