Highlight updated equipment row

src/components/spreadsheet/custom-columns/use-custom-column.ts

@@ -86,6 +86,7 @@ export function useCustomColumn(tabIndex: number) {
                     valueGetter: createValueGetter(colDef),
                     editable: false,
                     suppressMovable: true,
+                    enableCellChangeFlash: true,
                 };
             }),
         [tableDefinition.columns, tableDefinition.name, tabIndex, createValueGetter]

src/components/spreadsheet/table-wrapper.tsx

@@ -115,6 +115,7 @@ export const TableWrapper: FunctionComponent<TableWrapperProps> = ({
     const [manualTabSwitch, setManualTabSwitch] = useState<boolean>(true);
 
     const [rowData, setRowData] = useState<Identifiable[]>([]);
+    const [equipmentToUpdateId, setEquipmentToUpdateId] = useState<string | null>(null);
 
     const isLockedColumnNamesEmpty = useMemo(() => formattedLockedColumns.size === 0, [formattedLockedColumns.size]);
 
@@ -190,9 +191,28 @@ export const TableWrapper: FunctionComponent<TableWrapperProps> = ({
         [tableDefinition.type]
     );
 
+    const highlightUpdatedEquipment = useCallback(() => {
+        if (!equipmentToUpdateId) {
+            return;
+        }
+
+        const api = gridRef.current?.api;
+        const rowNode = api?.getRowNode(equipmentToUpdateId);
+
+        if (rowNode && api) {
+            api.flashCells({
+                rowNodes: [rowNode],
+                flashDuration: 1000,
+            });
+        }
+
+        setEquipmentToUpdateId(null);
+    }, [equipmentToUpdateId]);
+
     const { equipments, errorMessage, isFetching } = useSpreadsheetEquipments(
         tableDefinition.type,
-        formatFetchedEquipmentsHandler
+        formatFetchedEquipmentsHandler,
+        highlightUpdatedEquipment
     );
 
     useEffect(() => {
@@ -314,6 +334,7 @@ export const TableWrapper: FunctionComponent<TableWrapperProps> = ({
     const onRowClicked = useCallback(
         (event: RowClickedEvent) => {
             const equipmentId = event.data.id;
+            setEquipmentToUpdateId(equipmentId);
             handleOpenModificationDialog(equipmentId);
         },
         [handleOpenModificationDialog]

src/components/spreadsheet/use-spreadsheet-equipments.ts

@@ -31,7 +31,8 @@ type FormatFetchedEquipments = (equipments: Identifiable[]) => Identifiable[];
 
 export const useSpreadsheetEquipments = (
     type: SpreadsheetEquipmentType,
-    formatFetchedEquipments: FormatFetchedEquipments
+    formatFetchedEquipments: FormatFetchedEquipments,
+    highlightUpdatedEquipment: () => void
 ) => {
     const dispatch = useDispatch();
     const allEquipments = useSelector((state: AppState) => state.spreadsheetNetwork);
@@ -122,6 +123,7 @@ export const useSpreadsheetEquipments = (
         if (impactedSubstationsIds.length > 0 && studyUuid && currentRootNetworkUuid && currentNode?.id) {
             // The formatting of the fetched equipments is done in the reducer
             fetchAllEquipments(studyUuid, nodeId, currentRootNetworkUuid, impactedSubstationsIds).then((values) => {
+                highlightUpdatedEquipment();
                 dispatch(updateEquipments(values, nodeId));
             });
             resetImpactedSubstationsIds();
@@ -163,6 +165,7 @@ export const useSpreadsheetEquipments = (
         resetImpactedSubstationsIds,
         resetDeletedEquipments,
         resetImpactedElementTypes,
+        highlightUpdatedEquipment,
     ]);
 
     useEffect(() => {