Group modifications search results by modification (#3417)

The results of the modification search are now grouped: the name of a modification is displayed, followed by the list of impacted equipments.

Author: carojeandat

src/components/graph/menus/root-network/root-network-modification-results.tsx

@@ -29,12 +29,18 @@ const styles = {
             backgroundColor: theme.aggrid.highlightColor,
         },
     }),
-    modificationLabel: {
+    modifiedEquipmentLabel: (theme: Theme) => ({
         cursor: 'pointer',
-        pt: 0.5,
-        pb: 0.5,
-        pl: 0.5,
-    },
+        pt: theme.spacing(0.5),
+        pb: theme.spacing(0.5),
+        pl: theme.spacing(1.5),
+    }),
+    modificationLabel: (theme: Theme) => ({
+        cursor: 'pointer',
+        pt: theme.spacing(1.5),
+        pb: theme.spacing(0.5),
+        pl: theme.spacing(0.5),
+    }),
 };
 export const ModificationResults: React.FC<ModificationResultsProps> = ({ modifications, nodeUuid }) => {
     const intl = useIntl();
@@ -77,10 +83,27 @@ export const ModificationResults: React.FC<ModificationResultsProps> = ({ modifi
     return (
         <>
             {modifications.map((modification) => (
-                <Box sx={styles.itemHover} key={modification.impactedEquipmentId + modification.modificationUuid}>
-                    <Typography variant="body2" onClick={() => handleClick(modification)} sx={styles.modificationLabel}>
-                        <strong>{modification.impactedEquipmentId + ' - '}</strong> {getModificationLabel(modification)}
+                <Box key={modification.modificationUuid}>
+                    <Typography
+                        variant="body2"
+                        onClick={() => handleClick(modification)}
+                        sx={[styles.itemHover, styles.modificationLabel]}
+                    >
+                        {getModificationLabel(modification)}
+                        {` (${modification.impactedEquipmentIds.length})`}
                     </Typography>
+                    <Box key={modification.modificationUuid}>
+                        {modification.impactedEquipmentIds.map((equipmentId) => (
+                            <Typography
+                                key={equipmentId}
+                                variant="body2"
+                                onClick={() => handleClick(modification)}
+                                sx={[styles.itemHover, styles.modifiedEquipmentLabel]}
+                            >
+                                <strong>{equipmentId}</strong>
+                            </Typography>
+                        ))}
+                    </Box>
                 </Box>
             ))}
         </>

src/components/graph/menus/root-network/root-network-panel-search.tsx

@@ -30,7 +30,12 @@ interface RootNetworkSearchPanelProps {
 }
 
 function getModificationResultsCount(results: ModificationsSearchResult[]): number {
-    return results.reduce((sum, r) => sum + r.modifications.length, 0);
+    return results.reduce((sum, node) => {
+        const countForNode = node.modifications.reduce((innerSum, modif) => {
+            return innerSum + modif.impactedEquipmentIds.length;
+        }, 0);
+        return sum + countForNode;
+    }, 0);
 }
 
 function getNodeResultsCount(results: string[]): number {
@@ -139,19 +144,26 @@ const RootNetworkSearchPanel: React.FC<RootNetworkSearchPanelProps> = ({ setIsSe
 
             {isLoading && (
                 <Typography variant="body2" sx={{ mt: 1, color: 'gray' }}>
-                    {intl.formatMessage({ id: 'rootNetwork.loading' })}
+                    <FormattedMessage id="rootNetwork.loading" />
                 </Typography>
             )}
             {showResultsCount && (
                 <Typography variant="body2" sx={{ mt: 1, color: 'gray' }}>
-                    <FormattedMessage
-                        id="rootNetwork.results"
-                        values={{
-                            count: isNodeTab(tabValue)
-                                ? getNodeResultsCount(nodesSearch.results)
-                                : getModificationResultsCount(modificationsSearch.results),
-                        }}
-                    />
+                    {isNodeTab(tabValue) ? (
+                        <FormattedMessage
+                            id="rootNetwork.nodeResults"
+                            values={{
+                                count: getNodeResultsCount(nodesSearch.results),
+                            }}
+                        />
+                    ) : (
+                        <FormattedMessage
+                            id="rootNetwork.modificationResults"
+                            values={{
+                                count: getModificationResultsCount(modificationsSearch.results),
+                            }}
+                        />
+                    )}
                 </Typography>
             )}
 

src/components/graph/menus/root-network/root-network.types.ts

@@ -8,9 +8,9 @@ import type { UUID } from 'node:crypto';
 
 export interface Modification {
     modificationUuid: UUID;
-    impactedEquipmentId: string;
     messageValues: string;
     messageType: string;
+    impactedEquipmentIds: string[];
 }
 
 export interface ModificationsSearchResult {

src/translations/en.json

@@ -1450,7 +1450,8 @@
     "rootNetwork.searchPlaceholder.nodes": "Search for a node…",
     "rootNetwork.modificationTab": "Modifications",
     "rootNetwork.nodeTab": "Nodes",
-    "rootNetwork.results": "{count, plural, =0 {No result} =1 {# result} other {# results}}",
+    "rootNetwork.nodeResults": "{count, plural, =0 {No result} =1 {# result} other {# results}}",
+    "rootNetwork.modificationResults": "{count, plural, =0 {No equipment found} =1 {# equipment found} other {# equipments found}}",
     "rootNetwork.loading": "Loading...",
     "rootNetwork.originalNotFound": "The original case was not found",
     "rootNetwork.unknownPath": "<Unknown>",

src/translations/fr.json

@@ -1452,7 +1452,8 @@
     "rootNetwork.searchPlaceholder.nodes": "Rechercher un nœud...",
     "rootNetwork.modificationTab": "Modifications",
     "rootNetwork.nodeTab": "Nœuds",
-    "rootNetwork.results": "{count, plural, =0 {Aucun résultat} =1 {# résultat} other {# résultats}}",
+    "rootNetwork.nodeResults": "{count, plural, =0 {Aucun résultat} =1 {# résultat} other {# résultats}}",
+    "rootNetwork.modificationResults": "{count, plural, =0 {Aucun ouvrage trouvé} =1 {# ouvrage trouvé} other {# ouvrages trouvés}}",
     "rootNetwork.loading": "Chargement...",
     "rootNetwork.originalNotFound": "La situation d'origine est introuvable",
     "rootNetwork.unknownPath": "<Inconnu>",