From 0e87c2f9caaaaf417560f051aa3e245a067c4241 Mon Sep 17 00:00:00 2001
From: Anis <smailio@users.noreply.github.com>
Date: Thu, 23 Jan 2025 11:00:04 +0100
Subject: [PATCH] feat(ui-studies): sort study tree folders (#2300)

Co-authored-by: Anis SMAIL <anis.smail_externe@rte-france.com>
Co-authored-by: Samir Kamal <1954121+skamril@users.noreply.github.com>
---
 .../components/App/Studies/StudyTree/StudyTreeNode.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/webapp/src/components/App/Studies/StudyTree/StudyTreeNode.tsx b/webapp/src/components/App/Studies/StudyTree/StudyTreeNode.tsx
index e84b9592c9..7d3644f06f 100644
--- a/webapp/src/components/App/Studies/StudyTree/StudyTreeNode.tsx
+++ b/webapp/src/components/App/Studies/StudyTree/StudyTreeNode.tsx
@@ -12,7 +12,8 @@
  * This file is part of the Antares project.
  */
 
-import { memo } from "react";
+import { memo, useMemo } from "react";
+import * as R from "ramda";
 import type { StudyTreeNodeProps } from "./types";
 import TreeItemEnhanced from "@/components/common/TreeItemEnhanced";
 import { t } from "i18next";
@@ -25,6 +26,11 @@ export default memo(function StudyTreeNode({
   const isLoadingFolder = studyTreeNode.hasChildren && studyTreeNode.children.length === 0;
   const id = parentId ? `${parentId}/${studyTreeNode.name}` : studyTreeNode.name;
 
+  const sortedChildren = useMemo(
+    () => R.sortBy(R.prop("name"), studyTreeNode.children),
+    [studyTreeNode.children],
+  );
+
   if (isLoadingFolder) {
     return (
       <TreeItemEnhanced
@@ -43,7 +49,7 @@ export default memo(function StudyTreeNode({
       label={studyTreeNode.name}
       onClick={() => onNodeClick(id, studyTreeNode)}
     >
-      {studyTreeNode.children.map((child) => (
+      {sortedChildren.map((child) => (
         <StudyTreeNode
           key={`${id}/${child.name}`}
           studyTreeNode={child}