sort casesKey and stepsKey correctly (#2166)

microsoft · Mar 4, 2020 · a20d2b2 · a20d2b2
1 parent aed7c65
commit a20d2b2
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/Composer/packages/extensions/visual-designer/src/components/groups/StepGroup.tsx b/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);
 };

diff --git a/Composer/packages/extensions/visual-designer/src/widgets/SwitchConditionWidget.tsx b/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);
 };