Migrate Utils to TS

.eslintrc.json

@@ -1,6 +1,6 @@
 {
     "root": true,
-    "extends": ["react-app", "plugin:prettier/recommended"],
+    "extends": ["plugin:jest-extended/all", "react-app", "plugin:prettier/recommended"],
     "ignorePatterns": [
         // node_modules is implicitly always ignored
         "build",

jest.config.ts

@@ -16,6 +16,7 @@ const config: Config = {
     transformIgnorePatterns: ['node_modules/(?!@gridsuite/commons-ui|react-dnd|dnd-core|@react-dnd)'], // transform from ESM
     moduleDirectories: ['node_modules', 'src'], // to allow absolute path from ./src
     setupFiles: ['<rootDir>/jest.setup.ts'],
+    setupFilesAfterEnv: ['jest-extended/all'],
 };
 
 export default config;

package.json

@@ -17,6 +17,7 @@
         "@reduxjs/toolkit": "^2.2.3",
         "@svgdotjs/svg.js": "^3.2.0",
         "@svgdotjs/svg.panzoom.js": "^2.1.2",
+        "@xyflow/react": "^12.3.2",
         "ag-grid-community": "^31.0.0",
         "ag-grid-react": "^31.2.0",
         "cheap-ruler": "^3.0.2",
@@ -36,7 +37,6 @@
         "react-beautiful-dnd": "^13.1.1",
         "react-csv-downloader": "^3.1.0",
         "react-dom": "^18.2.0",
-        "@xyflow/react": "^12.3.2",
         "react-grid-layout": "^1.4.4",
         "react-hook-form": "^7.51.2",
         "react-intl": "^6.6.4",
@@ -101,15 +101,18 @@
         "eslint-config-react-app": "^7.0.1",
         "eslint-plugin-flowtype": "^8.0.3",
         "eslint-plugin-import": "^2.29.1",
+        "eslint-plugin-jest-extended": "^2.4.0",
         "eslint-plugin-jsx-a11y": "^6.8.0",
         "eslint-plugin-prettier": "^4.2.1",
         "eslint-plugin-react": "^7.34.1",
         "eslint-plugin-react-hooks": "^4.6.0",
         "identity-obj-proxy": "^3.0.0",
         "jest": "^29.7.0",
         "jest-environment-jsdom": "^29.7.0",
+        "jest-extended": "^4.0.2",
         "license-checker": "^25.0.1",
         "prettier": "^2.8.8",
+        "ts-arithmetic": "^0.1.1",
         "ts-node": "^10.9.2",
         "type-fest": "^4.22.1",
         "typescript": "5.1.6",

src/components/diagrams/diagram-pane.tsx

@@ -40,7 +40,7 @@ import { isNodeBuilt, isNodeInNotificationList } from '../graph/util/model-funct
 import { AutoSizer } from 'react-virtualized';
 import Diagram from './diagram';
 import { SLD_DISPLAY_MODE } from '../network/constants';
-import { useNameOrId } from '../utils/equipmentInfosHandler';
+import useNameOrId from '../utils/use-name-or-id';
 import { syncDiagramStateWithSessionStorage } from '../../redux/session-storage/diagram-state';
 import SingleLineDiagramContent from './singleLineDiagram/single-line-diagram-content';
 import NetworkAreaDiagramContent from './networkAreaDiagram/network-area-diagram-content';
@@ -210,17 +210,15 @@ const useDisplayView = (studyUuid: UUID, currentNode: CurrentTreeNode) => {
                         let nadTitle = '';
                         let substationsIds: UUID[] = [];
                         svg.additionalMetadata?.voltageLevels
-                            .map((vl: { name: string; substationId: UUID }) => ({
+                            .map((vl) => ({
                                 name: getNameOrId(vl),
                                 substationId: vl.substationId,
                             }))
                             .sort(
-                                (
-                                    vlA: { name: string; substationId: UUID },
-                                    vlB: { name: string; substationId: UUID }
-                                ) => vlA.name.toLowerCase().localeCompare(vlB.name.toLowerCase())
+                                (vlA, vlB) =>
+                                    vlA.name?.toLowerCase()?.localeCompare(vlB.name?.toLowerCase() ?? '') ?? -1
                             )
-                            .forEach((voltageLevel: { name: string; substationId: UUID }) => {
+                            .forEach((voltageLevel) => {
                                 const name = voltageLevel.name;
                                 if (name !== null) {
                                     nadTitle += (nadTitle !== '' ? ', ' : '') + name;