Merge branch 'main' into contingencyListByFilter

Author: basseche

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.116.4",
+    "version": "0.120.0",
     "description": "common react components for gridsuite applications",
     "author": "gridsuite team",
     "homepage": "https://github.com/gridsuite",

package.json

@@ -59,6 +59,7 @@ export function CriteriaBasedForm({ equipments, defaultValues, children }: Reado
                     resetOnConfirmation={handleResetOnConfirmation}
                     message="changeTypeMessage"
                     validateButtonLabel="button.changeType"
+                    data-testid="EquipmentTypeSelector"
                 />
             </Box>
             <Box sx={unscrollableDialogStyles.scrollableContent}>

src/components/contingencyList/criteriaBased/CriteriaBasedForm.tsx

@@ -14,6 +14,7 @@ import { SubmitButton } from '../../inputs/reactHookForm/utils/SubmitButton';
 import { CancelButton } from '../../inputs/reactHookForm/utils/CancelButton';
 import { CustomFormProvider } from '../../inputs/reactHookForm/provider/CustomFormProvider';
 import { PopupConfirmationDialog } from '../popupConfirmationDialog/PopupConfirmationDialog';
+import { GsLang } from '../../../utils';
 
 export type CustomMuiDialogProps<T extends FieldValues = FieldValues> = DialogProps & {
     open: boolean;
@@ -28,7 +29,7 @@ export type CustomMuiDialogProps<T extends FieldValues = FieldValues> = DialogPr
     onCancel?: () => void;
     children: ReactNode;
     isDataFetching?: boolean;
-    language?: string;
+    language?: GsLang;
     confirmationMessageKey?: string;
     unscrollableFullHeight?: boolean;
 };

src/components/dialogs/customMuiDialog/CustomMuiDialog.tsx

@@ -89,7 +89,6 @@ export function DescriptionModificationDialog({
                     label="descriptionProperty"
                     minRows={3}
                     rows={3}
-                    data-testid="DescriptionInputField"
                 />
             </Box>
         </CustomMuiDialog>

src/components/dialogs/descriptionModificationDialog/DescriptionModificationDialog.tsx

@@ -262,9 +262,9 @@ export function DirectoryItemSelector({
     }, [convertRoots, types, snackError]);
 
     const fetchDirectoryChildren = useCallback(
-        (nodeId: UUID): void => {
+        (nodeId: UUID): Promise<void> => {
             const typeList = types.includes(ElementType.DIRECTORY) ? [] : types;
-            fetchDirectoryContent(nodeId, typeList)
+            return fetchDirectoryContent(nodeId, typeList)
                 .then((children) => {
                     const childrenMatchedTypes = children.filter((item: ElementAttributes) =>
                         contentFilter().has(item.type)
@@ -279,7 +279,7 @@ export function DirectoryItemSelector({
                             types,
                             equipmentTypes
                         ).then((childrenWithMetadata: ElementAttributes[]) => {
-                            const filtredChildren = itemFilter
+                            const filteredChildren = itemFilter
                                 ? childrenWithMetadata.filter((val: ElementAttributes) => {
                                       // Accept every directory
                                       if (val.type === ElementType.DIRECTORY) {
@@ -290,12 +290,12 @@ export function DirectoryItemSelector({
                                   })
                                 : childrenWithMetadata;
                             // update directory content
-                            addToDirectory(nodeId, filtredChildren);
+                            addToDirectory(nodeId, filteredChildren);
                         });
-                    } else {
-                        // update directory content
-                        addToDirectory(nodeId, childrenMatchedTypes);
                     }
+                    // update directory content
+                    addToDirectory(nodeId, childrenMatchedTypes);
+                    return Promise.resolve();
                 })
                 .catch((error) => {
                     console.warn(`Could not update subs (and content) of '${nodeId}' : ${error.message}`);
@@ -306,13 +306,11 @@ export function DirectoryItemSelector({
 
     // Helper function to fetch children for a node if not already loaded
     const fetchNodeChildrenIfNeeded = useCallback(
-        (nodeId: UUID, delay: number = 0) => {
-            setTimeout(() => {
-                const node = nodeMap.current[nodeId];
-                if (node && (!node.children || node.children.length === 0) && node.type === ElementType.DIRECTORY) {
-                    fetchDirectoryChildren(nodeId);
-                }
-            }, delay);
+        async (nodeId: UUID): Promise<void> => {
+            const node = nodeMap.current[nodeId];
+            if (node && (!node.children || node.children.length === 0) && node.type === ElementType.DIRECTORY) {
+                await fetchDirectoryChildren(nodeId);
+            }
         },
         [fetchDirectoryChildren]
     );
@@ -325,18 +323,18 @@ export function DirectoryItemSelector({
 
         const expandedArray = await getExpansionPathsForSelected(selected, expanded);
         setAutoExpandedNodes(expandedArray);
-        fetchChildrenForExpandedNodes(expandedArray, fetchNodeChildrenIfNeeded);
+        await fetchChildrenForExpandedNodes(expandedArray, fetchNodeChildrenIfNeeded);
         return true;
     }, [selected, expanded, fetchNodeChildrenIfNeeded]);
 
     // Handle expansion from provided expanded prop
-    const handleProvidedExpansion = useCallback((): boolean => {
+    const handleProvidedExpansion = useCallback(async (): Promise<boolean> => {
         if (!expanded || expanded.length === 0) {
             return false;
         }
 
         setAutoExpandedNodes(expanded);
-        fetchChildrenForExpandedNodes(expanded, fetchNodeChildrenIfNeeded);
+        await fetchChildrenForExpandedNodes(expanded, fetchNodeChildrenIfNeeded);
 
         return true;
     }, [expanded, fetchNodeChildrenIfNeeded]);
@@ -350,7 +348,7 @@ export function DirectoryItemSelector({
         }
 
         setAutoExpandedNodes(expandPath);
-        fetchChildrenForExpandedNodes(expandPath, fetchNodeChildrenIfNeeded);
+        await fetchChildrenForExpandedNodes(expandPath, fetchNodeChildrenIfNeeded);
 
         return true;
     }, [fetchNodeChildrenIfNeeded]);
@@ -359,11 +357,15 @@ export function DirectoryItemSelector({
     const initializeExpansion = useCallback(async () => {
         // Priority 1: Handle selected items
         const selectedSuccess = await handleSelectedExpansion();
-        if (selectedSuccess) return;
+        if (selectedSuccess) {
+            return;
+        }
 
         // Priority 2: Handle provided expanded items
-        const expandedSuccess = handleProvidedExpansion();
-        if (expandedSuccess) return;
+        const expandedSuccess = await handleProvidedExpansion();
+        if (expandedSuccess) {
+            return;
+        }
 
         // Priority 3: Fall back to last selected directory
         await handleLastSelectedExpansion();

src/components/directoryItemSelector/DirectoryItemSelector.tsx

@@ -6,7 +6,7 @@
  */
 
 import { UUID } from 'crypto';
-import { ElementAttributes, ElementType, LAST_SELECTED_DIRECTORY } from '../../utils';
+import { COMMON_APP_NAME, ElementAttributes, ElementType, LAST_SELECTED_DIRECTORY } from '../../utils';
 import { fetchDirectoryElementPath, updateConfigParameter } from '../../services';
 
 /**
@@ -30,7 +30,7 @@ export async function clearLastSelectedDirectory(): Promise<void> {
     localStorage.removeItem(LAST_SELECTED_DIRECTORY);
 
     try {
-        await updateConfigParameter(LAST_SELECTED_DIRECTORY, 'null');
+        await updateConfigParameter(COMMON_APP_NAME, LAST_SELECTED_DIRECTORY, 'null');
     } catch (error) {
         console.error('Failed to clear last selected directory:', error);
     }
@@ -42,7 +42,7 @@ export async function clearLastSelectedDirectory(): Promise<void> {
  */
 export async function saveLastSelectedDirectory(directoryId: UUID): Promise<void> {
     try {
-        await updateConfigParameter(LAST_SELECTED_DIRECTORY, directoryId);
+        await updateConfigParameter(COMMON_APP_NAME, LAST_SELECTED_DIRECTORY, directoryId);
     } catch (error) {
         console.error('Failed to save last selected directory:', error);
     }
@@ -92,29 +92,40 @@ export async function initializeFromLastSelected(): Promise<UUID[] | null> {
 }
 
 /**
- * Fetches expansion paths for multiple selected items
+ * Fetches expansion paths for multiple selected items, collecting unique parent directories
+ * (excluding the selected items themselves) and sorting them by their minimum depth across
+ * all paths. This ensures parents appear before their descendants in the returned array,
+ * which is crucial for sequential fetching to avoid loading children before parents are
+ * fully populated in the node map.
  * @param selectedIds Array of selected item UUIDs
  * @param expanded Optional existing expanded nodes
- * @returns Promise resolving to combined expansion array
+ * @returns Promise resolving to combined expansion array sorted by depth
  */
 export async function getExpansionPathsForSelected(selectedIds: UUID[], expanded: UUID[] = []): Promise<UUID[]> {
     const expandedSet = new Set<UUID>(expanded);
+    const idToMinIndex = new Map<UUID, number>();
 
-    const fetchPromises = selectedIds.map(async (selectedId) => {
-        const path = await fetchDirectoryPathSafe(selectedId);
+    const paths = await Promise.all(selectedIds.map(fetchDirectoryPathSafe));
 
-        if (path && path.length > 0) {
-            // Add all parent directories to the expanded set (exclude the item itself)
+    paths
+        .filter((p): p is ElementAttributes[] => !!p && p.length > 0)
+        .forEach((path) => {
             path.forEach((element, index) => {
                 if (index < path.length - 1) {
-                    expandedSet.add(element.elementUuid);
+                    const id = element.elementUuid;
+                    expandedSet.add(id);
+                    if (!idToMinIndex.has(id) || index < idToMinIndex.get(id)!) {
+                        idToMinIndex.set(id, index);
+                    }
                 }
             });
-        }
-    });
+        });
+
+    const expandedArray = Array.from(expandedSet).sort(
+        (a, b) => (idToMinIndex.get(a) ?? Infinity) - (idToMinIndex.get(b) ?? Infinity)
+    );
 
-    await Promise.all(fetchPromises);
-    return Array.from(expandedSet);
+    return expandedArray;
 }
 
 /**
@@ -142,17 +153,16 @@ export async function saveLastSelectedDirectoryFromNode(node: {
 }
 
 /**
- * Fetches children for expanded nodes with staggered delay to avoid overwhelming the server
+ * Fetches children for expanded nodes sequentially to ensure parent nodes are loaded before children
  * @param expandedNodes Array of node UUIDs to fetch children for
  * @param fetchChildrenCallback Function to fetch children for a single node
- * @param delayBetweenRequests Delay in milliseconds between requests (default: 100ms)
  */
-export function fetchChildrenForExpandedNodes(
+export async function fetchChildrenForExpandedNodes(
     expandedNodes: UUID[],
-    fetchChildrenCallback: (nodeId: UUID, delay: number) => void,
-    delayBetweenRequests: number = 100
-): void {
-    expandedNodes.forEach((nodeId, index) => {
-        fetchChildrenCallback(nodeId, index * delayBetweenRequests);
-    });
+    fetchChildrenCallback: (nodeId: UUID) => Promise<void>
+): Promise<void> {
+    await expandedNodes.reduce(async (promise, nodeId) => {
+        await promise;
+        return fetchChildrenCallback(nodeId);
+    }, Promise.resolve());
 }

src/components/directoryItemSelector/utils.ts

@@ -200,6 +200,7 @@ interface DndTableProps {
     uploadButtonMessageId?: string;
     handleResetButton?: () => void;
     resetButtonMessageId?: string;
+    maxRows?: number;
 }
 
 export function DndTable(props: Readonly<DndTableProps>) {
@@ -224,6 +225,7 @@ export function DndTable(props: Readonly<DndTableProps>) {
         uploadButtonMessageId = undefined,
         handleResetButton = undefined,
         resetButtonMessageId = undefined,
+        maxRows = MAX_ROWS_NUMBER,
     } = props;
     const intl = useIntl();
 
@@ -259,16 +261,16 @@ export function DndTable(props: Readonly<DndTableProps>) {
     }
 
     const addNewRows = (numberOfRows: number) => {
-        // checking if not exceeding 100 steps
-        if (currentRows.length + numberOfRows > MAX_ROWS_NUMBER) {
+        // checking if not exceeding the max allowed
+        if (currentRows.length + numberOfRows > maxRows) {
             setError(arrayFormName, {
                 type: 'custom',
                 message: intl.formatMessage(
                     {
                         id: 'MaximumRowNumberError',
                     },
                     {
-                        value: MAX_ROWS_NUMBER,
+                        value: maxRows,
                     }
                 ),
             });

src/components/dnd-table/dnd-table.tsx

@@ -24,6 +24,7 @@ import { FilterType } from './constants/FilterConstants';
 import { MAX_CHAR_DESCRIPTION } from '../../utils/constants/uiConstants';
 import { EXPERT_FILTER_QUERY } from './expert/expertFilterConstants';
 import { FILTER_EQUIPMENTS_ATTRIBUTES } from './explicitNaming/ExplicitNamingFilterConstants';
+import { GsLang } from '../../utils';
 
 const emptyFormData = {
     [FieldConstants.NAME]: '',
@@ -49,7 +50,7 @@ export interface FilterCreationDialogProps {
     open: boolean;
     onClose: () => void;
     activeDirectory?: UUID;
-    language?: string;
+    language?: GsLang;
     sourceFilterForExplicitNamingConversion?: {
         id: UUID;
         equipmentType: string;

src/components/filter/FilterCreationDialog.tsx

@@ -136,6 +136,7 @@ export function ExpertFilterForm() {
                     message="changeTypeMessage"
                     validateButtonLabel="button.changeType"
                     sx={filterStyles.textField}
+                    data-testid="EquipmentTypeSelector"
                 />
             </Box>
             <Box sx={unscrollableDialogStyles.scrollableContent}>