Adapt diagrams to new error handling setup

package.json

@@ -11,7 +11,7 @@
     "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
-        "@gridsuite/commons-ui": "0.164.0",
+        "@gridsuite/commons-ui": "0.165.0",
         "@hello-pangea/dnd": "^18.0.1",
         "@hookform/resolvers": "^4.1.3",
         "@mui/icons-material": "^5.18.0",

src/components/report-viewer-tab.jsx

@@ -131,7 +131,7 @@ export const ReportViewerTab = ({ visible, currentNode, disabled }) => {
 
     return (
         <>
-            {disabled && <AlertCustomMessageNode message={'InvalidNode'} />}
+            {disabled && <AlertCustomMessageNode message={{ descriptor: { id: 'InvalidNode' } }} />}
             {!disabled && !!report && (
                 <WaitingLoader loading={isReportLoading} message={'loadingReport'}>
                     <Paper sx={styles.container}>

src/components/result-view-tab.tsx

@@ -319,7 +319,7 @@ export const ResultViewTab: FunctionComponent<IResultViewTabProps> = ({
                 <Tabs value={tabIndex} variant="scrollable" onChange={handleChangeTab} TabIndicatorProps={{}}>
                     {services.map((service) => renderTab(service))}
                 </Tabs>
-                {disabled && <AlertCustomMessageNode message={'InvalidNode'} />}
+                {disabled && <AlertCustomMessageNode message={{ descriptor: { id: 'InvalidNode' } }} />}
             </Box>
             {services.map((service, index) => renderTabPanelLazy(service, index))}
         </Paper>

src/components/utils/alert-custom-message-node.tsx

@@ -5,7 +5,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { mergeSx, type MuiStyles, type SxStyle } from '@gridsuite/commons-ui';
+import { ErrorMessageDescriptor, mergeSx, type MuiStyles, type SxStyle } from '@gridsuite/commons-ui';
 import Alert from '@mui/material/Alert';
 import { FormattedMessage } from 'react-intl';
 
@@ -18,7 +18,7 @@ const styles = {
 } as const satisfies MuiStyles;
 
 interface AlertCustomMessageNodeProps {
-    message: string;
+    message: ErrorMessageDescriptor;
     noMargin?: boolean;
     style?: SxStyle;
 }
@@ -28,7 +28,7 @@ const AlertCustomMessageNode = (props: AlertCustomMessageNodeProps) => {
 
     return (
         <Alert sx={mergeSx(!noMargin ? styles.customMessageNode : undefined, style)} severity="warning">
-            <FormattedMessage id={message} />
+            <FormattedMessage id={message.descriptor.id} values={message.values} />
         </Alert>
     );
 };

src/components/workspace/diagrams/diagram-wrapper.tsx

@@ -9,11 +9,12 @@ import { Box, CircularProgress } from '@mui/material';
 import { ReactNode } from 'react';
 import AlertCustomMessageNode from '../../utils/alert-custom-message-node';
 import { cardStyles } from '../../grid-layout/cards/card-styles';
+import { ErrorMessageDescriptor } from '@gridsuite/commons-ui';
 
 interface DiagramWrapperProps {
     loading: boolean;
     hasSvg: boolean;
-    globalError?: string;
+    globalError?: ErrorMessageDescriptor;
     children: ReactNode;
 }
 

src/components/workspace/diagrams/nad/use-nad-diagram.ts

@@ -8,16 +8,16 @@
 import type { UUID } from 'node:crypto';
 import { useCallback, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useSnackMessage } from '@gridsuite/commons-ui';
+import { ErrorMessageDescriptor, extractErrorMessageDescriptor } from '@gridsuite/commons-ui';
 import { AppState } from '../../../../redux/reducer';
 import { DiagramType, NetworkAreaDiagram } from '../../../grid-layout/cards/diagrams/diagram.type';
 import { fetchSvg, getNetworkAreaDiagramUrl } from '../../../../services/study';
-import { saveNadConfig, deleteNadConfig } from '../../../../services/study/workspace';
+import { deleteNadConfig, saveNadConfig } from '../../../../services/study/workspace';
 import { mergePositions } from '../../../grid-layout/cards/diagrams/diagram-utils';
 import type { DiagramMetadata } from '@powsybl/network-viewer';
 import { useDiagramNotifications } from '../common/use-diagram-notifications';
 import { isNodeBuilt } from '../../../graph/util/model-functions';
-import { selectNadDiagramFields, selectActiveWorkspaceId } from '../../../../redux/slices/workspace-selectors';
+import { selectActiveWorkspaceId, selectNadDiagramFields } from '../../../../redux/slices/workspace-selectors';
 import type { RootState } from '../../../../redux/store';
 import { useWorkspacePanelActions } from '../../hooks/use-workspace-panel-actions';
 import { PERSISTENT_NAD_FIELDS } from '../../types/workspace.types';
@@ -66,7 +66,6 @@ export const useNadDiagram = ({ panelId, studyUuid, currentNodeId, currentRootNe
     const workspaceId = useSelector((state: RootState) => selectActiveWorkspaceId(state));
     const currentNode = useSelector((state: AppState) => state.currentTreeNode);
     const networkVisuParams = useSelector((state: AppState) => state.networkVisualizationsParameters);
-    const { snackError } = useSnackMessage();
 
     const [diagram, setDiagram] = useState<NetworkAreaDiagram>(() => ({
         type: DiagramType.NETWORK_AREA_DIAGRAM,
@@ -83,7 +82,7 @@ export const useNadDiagram = ({ panelId, studyUuid, currentNodeId, currentRootNe
         positions: [],
     }));
     const [loading, setLoading] = useState(false);
-    const [globalError, setGlobalError] = useState<string | undefined>();
+    const [globalError, setGlobalError] = useState<ErrorMessageDescriptor | undefined>();
 
     const setDiagramAndSync = useCallback(
         (updater: React.SetStateAction<NetworkAreaDiagram>, syncToBackend = true) => {
@@ -127,30 +126,13 @@ export const useNadDiagram = ({ panelId, studyUuid, currentNodeId, currentRootNe
         [setDiagramAndSync]
     );
 
-    const handleFetchError = useCallback(
-        (error: any) => {
-            console.error('Error fetching NAD diagram:', error);
-            let errorMessage: string;
-            if (error?.status === 400) {
-                errorMessage = 'nadConfiguredPositionsModeFailed';
-                snackError({ headerId: errorMessage });
-            } else if (error?.status === 404) {
-                errorMessage = 'VoltageLevelNotFound';
-            } else if (error?.status === 403) {
-                errorMessage = error.message || 'svgLoadingFail';
-                snackError({ headerId: errorMessage });
-            } else {
-                errorMessage = 'svgLoadingFail';
-                snackError({ headerId: errorMessage });
-            }
-            setGlobalError(errorMessage);
-        },
-        [snackError]
-    );
+    const handleFetchError = useCallback((error: any) => {
+        setGlobalError(extractErrorMessageDescriptor(error, ''));
+    }, []);
 
     const fetchDiagram = useCallback(() => {
         if (!currentNode || !isNodeBuilt(currentNode)) {
-            setGlobalError('InvalidNode');
+            setGlobalError({ descriptor: { id: 'InvalidNode' } });
             return Promise.resolve();
         }
 

src/components/workspace/diagrams/sld/use-sld-diagram.ts

@@ -8,7 +8,7 @@
 import type { UUID } from 'node:crypto';
 import { useCallback, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useSnackMessage, PARAM_LANGUAGE } from '@gridsuite/commons-ui';
+import { ErrorMessageDescriptor, extractErrorMessageDescriptor, PARAM_LANGUAGE } from '@gridsuite/commons-ui';
 import { AppState } from '../../../../redux/reducer';
 import { Diagram, DiagramType } from '../../../grid-layout/cards/diagrams/diagram.type';
 import { fetchSvg } from '../../../../services/study';
@@ -41,7 +41,6 @@ export const useSldDiagram = ({
     const networkVisuParams = useSelector((state: AppState) => state.networkVisualizationsParameters);
     const paramUseName = useSelector((state: AppState) => state[PARAM_USE_NAME]);
     const language = useSelector((state: AppState) => state[PARAM_LANGUAGE]);
-    const { snackError } = useSnackMessage();
 
     const [diagram, setDiagram] = useState<Diagram>(
         () =>
@@ -52,7 +51,7 @@ export const useSldDiagram = ({
             }) as Diagram
     );
     const [loading, setLoading] = useState(false);
-    const [globalError, setGlobalError] = useState<string | undefined>();
+    const [globalError, setGlobalError] = useState<ErrorMessageDescriptor | undefined>();
 
     // Helper to process SVG data - extracted to reduce nesting
     const processSvgData = useCallback((svgData: any) => {
@@ -61,29 +60,9 @@ export const useSldDiagram = ({
         }
     }, []);
 
-    const handleFetchError = useCallback(
-        (error: any) => {
-            console.error('Error fetching SLD diagram:', error);
-            let errorMessage: string;
-            if (error?.status === 404) {
-                setDiagram((current) => {
-                    errorMessage =
-                        current.type === DiagramType.SUBSTATION ? 'SubstationNotFound' : 'VoltageLevelNotFound';
-                    setGlobalError(errorMessage);
-                    return current;
-                });
-            } else if (error?.status === 403) {
-                errorMessage = error.message || 'svgLoadingFail';
-                snackError({ headerId: errorMessage });
-                setGlobalError(errorMessage);
-            } else {
-                errorMessage = 'svgLoadingFail';
-                snackError({ headerId: errorMessage });
-                setGlobalError(errorMessage);
-            }
-        },
-        [snackError]
-    );
+    const handleFetchError = useCallback((error: any) => {
+        setGlobalError(extractErrorMessageDescriptor(error, ''));
+    }, []);
 
     const handleFetchComplete = useCallback(() => {
         setLoading(false);
@@ -175,7 +154,7 @@ export const useSldDiagram = ({
         if (!currentNode?.id) return;
 
         if (currentNode.type !== NodeType.ROOT && !isStatusBuilt(currentNode?.data?.globalBuildStatus)) {
-            setGlobalError('InvalidNode');
+            setGlobalError({ descriptor: { id: 'InvalidNode' } });
             return;
         }
 

src/translations/en.json

@@ -67,8 +67,6 @@
     "studyNotFound": "Study with id \"{studyUuid}\" has not been found",
     "noWritePermissionOnStudy": "The user has no access right on study with id \"{studyUuid}\"",
     "svgNotFound": "Diagram has not been found: {error}; {svgUrl}",
-    "svgLoadingFail": "The diagram couldn't be loaded",
-    "nadConfiguredPositionsModeFailed": "The configured positions have not been initialized. You need to change the initialization parameter of the network area diagrams.",
     "networkLoadingFail": "Network of study with id \"{studyUuid}\" couldn't be loaded",
     "geoDataLoadingFail": "An error occurred while loading geographical data.",
 
@@ -1187,8 +1185,6 @@
     "YupNotTypeNumber": "This field only accepts numeric values",
     "YupNotTypeDefault": "Field value format is incorrect",
 
-    "SubstationNotFound": "This substation does not exist in this network",
-    "VoltageLevelNotFound": "This voltage level does not exist in this network",
     "NetworkEquipmentNotFound": "The equipment \"{equipmentId}\" does not exist in this network",
     "SLDOpenedInTheGrid": "The {diagramType} \"{equipmentId}\" was opened in the image grid",
     "NADOpenedInTheGrid": "The network area diagram \"{elementId}\" was opened in the image grid",

src/translations/fr.json

@@ -67,8 +67,6 @@
     "studyNotFound": "L'étude avec l'identifiant \"{studyUuid}\" n'a pas été trouvée",
     "noWritePermissionOnStudy": "L'utilisateur n'a pas le droit d'accès sur l'étude avec l'identifiant \"{studyUuid}\"",
     "svgNotFound": "L'image poste n'a pas été trouvée : {error}; {svgUrl}",
-    "svgLoadingFail": "L'image n'a pas pu être chargée",
-    "nadConfiguredPositionsModeFailed": "Les positions configurées n'ont pas été initialisées. Vous devez modifier le paramétrage d'initialisation des images nodales de la zone.",
     "networkLoadingFail": "Le réseau de l'étude avec l'identifiant \"{studyUuid}\" n'a pas pu être chargé",
     "geoDataLoadingFail": "Erreur lors du chargement des données géographiques.",
 
@@ -1183,8 +1181,6 @@
     "YupNotTypeNumber": "Ce champ n'accepte que des valeurs numériques",
     "YupNotTypeDefault": "La valeur du champ n'est pas au bon format",
 
-    "SubstationNotFound": "Ce site n'existe pas dans ce réseau",
-    "VoltageLevelNotFound": "Ce poste n'existe pas dans ce réseau",
     "NetworkEquipmentNotFound": "L'ouvrage \"{equipmentId}\" n'existe pas dans ce réseau",
 
     "SLDOpenedInTheGrid": "Le {diagramType} \"{equipmentId}\" a été ouvert dans la grille des images",