[red-knot] Fix stale syntax errors in playground (#17280)

## Summary

React requires that `key`s are unique but the constructed key for
diagnostics wasn't guaranteed when two diagnostics had the same name and
location.

This PR fixes this by using a disambiguator map to disambiguate the key.

Fixes #17276

## Test Plan



https://github.com/user-attachments/assets/f3f9d10a-ecc4-4ffe-8676-3633a12e07ce
This commit is contained in:
Micha Reiser 2025-04-07 18:39:21 +02:00 committed by GitHub
parent 27ecf350d8
commit 5e0f563ee4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -62,9 +62,11 @@ function Items({
);
}
const uniqueIds: Map<string, number> = new Map();
return (
<ul className="space-y-0.5 grow overflow-y-scroll">
{diagnostics.map((diagnostic, index) => {
{diagnostics.map((diagnostic) => {
const position = diagnostic.range;
const start = position?.start;
const id = diagnostic.id;
@ -72,8 +74,13 @@ function Items({
const startLine = start?.line ?? 1;
const startColumn = start?.column ?? 1;
const mostlyUniqueId = `${startLine}:${startColumn}-${id}`;
const disambiguator = uniqueIds.get(mostlyUniqueId) ?? 0;
uniqueIds.set(mostlyUniqueId, disambiguator + 1);
return (
<li key={`${startLine}:${startColumn}-${id ?? index}`}>
<li key={`${mostlyUniqueId}-${disambiguator}`}>
<button
onClick={() => onGoTo(startLine, startColumn)}
className="w-full text-start cursor-pointer select-text"