Merge pull request #2343 from anth-volk/fix/2342-no-order

Sort parameters

src/pages/PolicyPage.jsx

@@ -56,14 +56,42 @@ function PolicyLeftSidebar(props) {
   const [searchParams, setSearchParams] = useSearchParams();
   const POLICY_OUTPUT_TREE = getPolicyOutputTree(metadata.countryId);
   const selected = searchParams.get("focus") || "";
+
+  function recursiveAlphaSort(tree) {
+    if (!tree) {
+      return [];
+    }
+
+    let sorted = tree.sort((a, b) => {
+      // JS sorts by ASCII value - Z comes before a
+      if (a.label.toLowerCase() < b.label.toLowerCase()) {
+        return -1;
+      }
+      if (a.label.toLowerCase() > b.label.toLowerCase()) {
+        return 1;
+      }
+      return 0;
+    });
+
+    for (let i = 0; i < sorted.length; i++) {
+      sorted[i].children = recursiveAlphaSort(sorted[i].children);
+    }
+
+    return sorted;
+  }
+
+  const firstTree = recursiveAlphaSort(metadata.parameterTree.children);
+
   const onSelect = (name) => {
     let newSearch = copySearchParams(searchParams);
     newSearch.set("focus", name);
     setSearchParams(newSearch);
   };
+
   const isOnOutput =
     window.location.search.includes("focus=policyOutput") ||
     window.location.search.includes("focus=householdOutput");
+
   // The menu, then the search bar anchored to the bottom
   return (
     <div style={{ backgroundColor: style.colors.LIGHT_GRAY }}>
@@ -73,7 +101,8 @@ function PolicyLeftSidebar(props) {
         </div>
       )}
       <StackedMenu
-        firstTree={metadata.parameterTree.children}
+        // firstTree={metadata.parameterTree.children}
+        firstTree={firstTree}
         selected={selected}
         onSelect={onSelect}
         secondTree={POLICY_OUTPUT_TREE[0].children}