enrich id for the whole query

package.json

@@ -7,13 +7,14 @@
     "dependencies": {
         "@emotion/react": "^11.11.4",
         "@emotion/styled": "^11.11.5",
-        "@gridsuite/commons-ui": "0.60.0",
+        "@gridsuite/commons-ui": "file:../commons-ui/gridsuite-commons-ui-0.61.1.tgz",
         "@hookform/resolvers": "^3.3.4",
         "@mui/icons-material": "^5.15.14",
         "@mui/lab": "5.0.0-alpha.169",
         "@mui/material": "^5.15.14",
         "@mui/x-tree-view": "^6.17.0",
         "@reduxjs/toolkit": "^2.2.3",
+        "fast-deep-equal": "^3.1.3",
         "lodash": "^4.17.21",
         "notistack": "^3.0.1",
         "prop-types": "^15.8.1",
@@ -29,6 +30,7 @@
         "redux": "^5.0.1",
         "typeface-roboto": "^1.1.13",
         "typescript": "5.1.6",
+        "uuid": "^9.0.1",
         "yup": "^1.4.0"
     },
     "overrides": {
@@ -81,6 +83,7 @@
         "@types/react": "^18.2.75",
         "@types/react-dom": "^18.2.24",
         "@types/react-window": "^1.8.8",
+        "@types/uuid": "^9.0.8",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-prettier": "^4.2.1",
         "http-proxy-middleware": "^2.0.6",

src/redux/slices/Mapping.js

@@ -29,6 +29,7 @@ import {
     getExpertFilterEmptyFormData,
     importExpertRules,
 } from '@gridsuite/commons-ui';
+import { enrichIdQuery } from '../../utils/rqb-utils';
 
 const initialState = {
     mappings: [],
@@ -78,7 +79,12 @@ const transformMapping = (receivedMapping) => {
         //     filterCounterList.reduce((max, val) => Math.max(max, val), 0) + 1;
         rule['matches'] = [];
         if (rule.filter) {
-            rule['filter']['rules'] = importExpertRules(rule.filter.rules);
+            rule['filter']['rules'] = importExpertRules(
+                // RQB need an id for each rule/group to avoid re-create a new component
+                // even the same input => lost focus while typing
+                // This solution can be removed when the back-end returns id persisted for each rule in the db (round-trip)
+                enrichIdQuery(rule.filter.rules)
+            );
         }
         return rule;
     });

src/utils/rqb-utils.ts

@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) 2024, RTE (http://www.rte-france.com)
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import { v4 as uuid4 } from 'uuid';
+import { UUID } from 'crypto';
+import { RuleGroupTypeExport, RuleTypeExport } from '@gridsuite/commons-ui';
+
+const visitQuery = (
+    query: RuleGroupTypeExport,
+    visitor: (ruleOrGroup: RuleTypeExport | RuleGroupTypeExport) => void
+) => {
+    visitor(query);
+    const stack = [...query.rules];
+    while (stack?.length) {
+        const ruleOrGroup = stack.shift();
+        ruleOrGroup && visitor(ruleOrGroup);
+        if (ruleOrGroup && 'rules' in ruleOrGroup) {
+            stack.push(...ruleOrGroup.rules);
+        }
+    }
+    return query;
+};
+
+const idUpdater = (ruleOrGroup: RuleTypeExport | RuleGroupTypeExport) => {
+    if (ruleOrGroup && !ruleOrGroup.id) {
+        ruleOrGroup.id = uuid4() as UUID;
+    }
+};
+
+export const enrichIdQuery = (query: RuleGroupTypeExport) => {
+    return visitQuery(query, idUpdater);
+};