[FIX] devtools: fix incorrect path resolution for subscriptions

Since we now omit some observed objects when listing subscriptions, the
index of the subscription is no longer the index of the raw
subscription. This causes issue with the resolution of object paths when
they are inside a subscription. This commit fixes that by adding the
index to the raw subscription.

We also need to adapt the code that traverses the old tree, since the
index of the subscription in the component is no longer the same as the
index of the subscription "child" in the object tree.
This commit is contained in:
Samuel Degueldre
2023-06-23 15:44:19 +02:00
committed by Julien
parent aa3c88a6c4
commit 432ff444a1
@@ -847,7 +847,10 @@
let path = completePath.slice(objPathIndex); let path = completePath.slice(objPathIndex);
let obj; let obj;
if (objType === "subscription") { if (objType === "subscription") {
obj = oldTree.subscriptions.children[path[1].value].target; const subscriptionPath = completePath.slice(0, objPathIndex + 3);
obj = oldTree.subscriptions.children.find(
(child) => JSON.stringify(child.target.path) === JSON.stringify(subscriptionPath)
).target;
path = path.slice(3); path = path.slice(3);
} else { } else {
// Everything here is in component if it is not an app so remove this key of the path in the former case // Everything here is in component if it is not an app so remove this key of the path in the former case
@@ -1265,7 +1268,7 @@
toggled: oldTree ? oldTree.subscriptions.toggled : true, toggled: oldTree ? oldTree.subscriptions.toggled : true,
children: [], children: [],
}; };
rawSubscriptions.forEach((rawSubscription, index) => { rawSubscriptions.forEach((rawSubscription) => {
let subscription = { let subscription = {
target: { target: {
name: this.targetName(rawSubscription.target, node), name: this.targetName(rawSubscription.target, node),
@@ -1279,7 +1282,7 @@
path: [ path: [
...path, ...path,
{ type: "item", value: "subscriptions" }, { type: "item", value: "subscriptions" },
{ type: "item", value: index }, { type: "item", value: rawSubscription.index },
{ type: "item", value: "target" }, { type: "item", value: "target" },
], ],
toggled: false, toggled: false,
@@ -1288,8 +1291,8 @@
}; };
if ( if (
oldTree && oldTree &&
oldTree.subscriptions.children[index] && oldTree.subscriptions.children[rawSubscription.index] &&
oldTree.subscriptions.children[index].target.toggled oldTree.subscriptions.children[rawSubscription.index].target.toggled
) { ) {
subscription.target.toggled = true; subscription.target.toggled = true;
} }
@@ -1682,9 +1685,12 @@
* subscriptions of the node * subscriptions of the node
*/ */
topLevelSubscriptions(node) { topLevelSubscriptions(node) {
const subscriptions = node.subscriptions; const subscriptions = node.subscriptions.map((s, index) => ({ ...s, index }));
const topLevelValues = new Set(Object.values(node.component).map((o) => this.toRaw(o)));
const toOmit = new Set( const toOmit = new Set(
subscriptions.flatMap(({ keys, target }) => keys.map((k) => this.toRaw(target[k]))) subscriptions
.flatMap(({ keys, target }) => keys.map((k) => this.toRaw(target[k])))
.filter((obj) => !topLevelValues.has(obj))
); );
return subscriptions.filter(({ target }) => !toOmit.has(target)); return subscriptions.filter(({ target }) => !toOmit.has(target));
} }