fix: fix 'sort()' function of steps and cases in visual editor

Composer/packages/extensions/visual-designer/src/components/groups/StepGroup.tsx

@@ -25,6 +25,7 @@ const StepInterval = ElementInterval.y;
 type StepNodeKey = string;
 
 const getStepKey = (stepOrder: number): StepNodeKey => `steps[${stepOrder}]`;
+const parseStepIndex = (stepKey: string): number => parseInt(stepKey.replace(/steps\[(\d+)\]/, '$1'));
 
 const calculateNodes = (groupId: string, data): GraphNodeMap<StepNodeKey> => {
   const steps = transformStepGroup(data, groupId);
@@ -37,7 +38,7 @@ const calculateNodes = (groupId: string, data): GraphNodeMap<StepNodeKey> => {
 
 const calculateLayout = (nodeMap: GraphNodeMap<StepNodeKey>): GraphLayout => {
   const nodes = Object.keys(nodeMap)
-    .sort()
+    .sort((a, b) => parseStepIndex(a) - parseStepIndex(b))
     .map(stepName => nodeMap[stepName]);
   return sequentialLayouter(nodes);
 };

Composer/packages/extensions/visual-designer/src/widgets/SwitchConditionWidget.tsx

@@ -28,6 +28,7 @@ enum SwitchNodes {
 type CaseNodeKey = string;
 
 const getCaseKey = (caseIndex: number): CaseNodeKey => `cases[${caseIndex}]`;
+const parseCaseIndex = (caseKey: CaseNodeKey): number => parseInt(caseKey.replace(/cases\[(\d+)\]/, '$1'));
 
 const calculateNodeMap = (path: string, data): GraphNodeMap<SwitchNodes | CaseNodeKey> => {
   const result = transformSwitchCondition(data, path);
@@ -55,7 +56,7 @@ const calculateNodeMap = (path: string, data): GraphNodeMap<SwitchNodes | CaseNo
 const calculateLayout = (nodeMap: GraphNodeMap<SwitchNodes | CaseNodeKey>) => {
   const { switchNode, choiceNode, ...cases } = nodeMap as GraphNodeMap<SwitchNodes>;
   const casesNodes = Object.keys(cases)
-    .sort()
+    .sort((a, b) => parseCaseIndex(a) - parseCaseIndex(b))
     .map(caseName => nodeMap[caseName]);
   return switchCaseLayouter(switchNode, choiceNode, casesNodes);
 };