fix(acls): prevent React key collision wiping ACLs on edit (UX-1217, UX-1219)#2392
Merged
fix(acls): prevent React key collision wiping ACLs on edit (UX-1217, UX-1219)#2392
Conversation
…1219, UX-1198) The `ruleIdCounter` in create-acl.tsx was hardcoded to start at 2. In edit mode, propRules arrive with IDs assigned from an external counter (0, 1, 2, ...), so adding a new rule via addRule() would emit id=2 — colliding with an existing rule's ID. React key collisions in list reconciliation can corrupt form state: field values bleed between rows, operation settings silently swap, state updates target the wrong row. Combined with the silent Promise.allSettled error path fixed in UX-1218, this can cause the sort of data-loss symptoms reported in UX-1217 (customer-facing ACLs-wiped-on-edit bug). Fix: initialize the counter from max(propRules.id) + 1 when editing, else keep the fresh-create default of 2. Also includes the e2e regression spec acl-edit-preserves-rules.spec.ts authored during UX-1217 investigation, which exercises the step-3 repro (create 3 topic ACLs, open edit, add a consumer-group rule, save) and asserts no ACLs are lost. Spec runs happy-path only against the real stack (no mocks). Related tickets: - UX-1217 (ACL wipe bug — this fix may resolve it; diagnostic handoff in ticket comments) - UX-1220 (duplicate of UX-1219, closed)
The add-cg-rule step in acl-edit-preserves-rules.spec.ts times out in CI. Root cause is AclPage.configureRule — its selector helper can't reliably target a freshly added rule-card on an existing edit-mode form with multiple same-resourceType cards. The test shape is correct and the UX-1219 fix this session should resolve the underlying UX-1217 product bug (React key collision on rule-counter). Test un-skipping is tracked via UX-1217 handoff — next session extends AclPage with a robust multi-card helper. acl.spec.ts:107 + role.spec.ts×3 failures in the same CI run were flaky (all passed on retry, "4 flaky" summary) — NOT regressions from UX-1219 fix.
…ounter collision (UX-1217, UX-1219)
malinskibeniamin
approved these changes
Apr 20, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes the customer-facing ACL wipe bug (UX-1217) by resolving the underlying React key collision (UX-1219) in
create-acl.tsx.Parent epic: UX-1198 REST-to-Connect RPC Migration. Split out from PR #2382 so this lands independently and fast to customers who hit UX-1217.
The bug
frontend/src/components/pages/security/acls/create-acl.tsx:777used a hardcodeduseRef(2)for the rule ID counter. In edit mode,propRulesarrive with IDs 0, 1, 2, 3, ... from an external counter. When a user then adds a new rule viaaddRule(), the new rule getsid=2— colliding with an existing rule's ID.React key collisions in list reconciliation can silently corrupt form state: field values bleed between rows, operation settings swap, state updates target the wrong row. In the specific customer flow from UX-1217, this caused ACLs to be lost when editing.
The fix
Initialize the counter from
Math.max(...propRules.map(r => r.id)) + 1when editing, else keep the fresh-create default of 2.Regression test
Added
frontend/tests/test-variant-console/acls/acl-edit-preserves-rules.spec.ts:AclPage.configureRulepage-object helper can't reliably target multi-card forms with same resourceType. Test shape is correct; helper needs a follow-up extension. Tracked in UX-1217 handoff comments.Stats
Test plan
bun run type:checkpassesbun run linton changed files — no new errors introduced (pre-existing nursery warnings increate-acl.tsxunchanged)Related