fixes blur issue on char type in Headers table

[akshaydeo]

Summary

Fixed a key generation issue in the HeadersTable component by using array index as the React key instead of attempting to use header key values.

Changes

• Changed the key prop in TableRow from using a conditional logic to simply using the array index
• Removed the unnecessary rowKey variable and comment that was explaining the previous approach
• This ensures consistent and reliable key generation for all table rows, including empty ones

Type of change

• Bug fix
• Feature
• Refactor
• Documentation
• Chore/CI

Affected areas

• Core (Go)
• Transports (HTTP)
• Providers/Integrations
• Plugins
• UI (Next.js)
• Docs

How to test

Verify that the headers table renders correctly and maintains proper state when adding/removing rows:

# UI
cd ui
pnpm i
pnpm dev

Navigate to any page with the HeadersTable component and verify that rows can be added, edited, and removed without issues.

Screenshots/Recordings

N/A

Breaking changes

• Yes
• No

Related issues

N/A

Security considerations

No security implications.

Checklist

• I read docs/contributing/README.md and followed the guidelines
• I added/updated tests where appropriate
• I updated documentation where needed
• I verified builds succeed (Go and UI)
• I verified the CI pipeline passes locally if applicable

[coderabbitai]

📝 Walkthrough

Summary by CodeRabbit

• Refactor
  • Optimized headers table row rendering by streamlining key assignment logic.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Walkthrough

Modified row key generation in the headers table to use the row index as the React key for each TableRow; prior conditional logic that derived a rowKey from a key property or empty-{index} was removed. Rendering of row contents is unchanged.

Changes

Cohort / File(s)	Change Summary
Headers Table Row Keys ui/components/ui/headersTable.tsx	Replaced previous rowKey derivation (use of row key or empty-{index}) with direct use of the row index as the React key for each TableRow. Removed related conditional logic and comment.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Check that using the index as key is safe given how rows are added/removed or reordered.
• Confirm no tests or components rely on the prior empty-{index} string values.

Poem

🐰 I hopped through rows with gentle cheer,
Keys once varied, now align here,
Indexes drum a steady tune,
No more guessing by the moon,
A tiny change — the table sings anew.

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Title check	⚠️ Warning	The title references a 'blur issue' but the summary describes only a key generation change that affects table row rendering, not a visual blur effect.	Update the title to accurately describe the actual change, such as 'Fix React key generation in HeadersTable component' or 'Use array index as React key in HeadersTable'.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description covers all required sections with clear explanations of changes, type, affected areas, testing steps, and checklist items properly filled out.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch 12-17-fixes_blur_issue_on_char_type_in_headers_table

---

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between c3bbb0a and 6e483b1.

📒 Files selected for processing (1)

• ui/components/ui/headersTable.tsx (1 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• ui/components/ui/headersTable.tsx

⏰ Context from checks skipped due to timeout of 900000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)

• GitHub Check: Graphite / mergeability_check
• GitHub Check: Graphite / mergeability_check
• GitHub Check: Graphite / mergeability_check
• GitHub Check: Graphite / mergeability_check
• GitHub Check: Graphite / mergeability_check
• GitHub Check: Graphite / mergeability_check
• GitHub Check: Graphite / mergeability_check
• GitHub Check: Graphite / mergeability_check

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[akshaydeo]

• moves config items into sidebar #1115
• fixes blur issue on char type in Headers table #1111 👈 (View in Graphite)
• batch config for each key #1104
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

ui/components/ui/headersTable.tsx (1)

101-101: The fix resolves the blur issue but introduces the index-as-key anti-pattern.

Switching to key={index} successfully fixes the blur issue that occurred when typing in the key field (React was unmounting/remounting rows as the key value changed). However, using array indices as React keys is generally problematic for dynamic lists:

1. Row deletion: When a row is deleted, React reuses DOM nodes from subsequent indices, which can cause confusion if a user has focus on a specific row.
2. Reconciliation issues: React may incorrectly match component instances during updates, though controlled inputs mitigate data corruption.

Recommended approach: Use stable IDs for each row instead of indices. For example:

-const rows = [...headerEntries, ["", ""]];
+const rows = [...headerEntries.map(([k, v]) => ({ id: k, key: k, value: v })), { id: '__empty__', key: '', value: '' }];

Then use key={row.id} for stable identity. For the empty row, use a constant sentinel ID like '__empty__' that never conflicts with user-entered keys.

Since the current fix is functional and the blur issue is critical UX, this change is acceptable as-is, but the stable-ID approach would be more robust for future maintenance.

Note: Per coding guidelines, this review should consider the entire Graphite stack (#1111, #1104, main), but the related PRs were not provided. If there are related changes to this component in the stack, please ensure they account for the key generation logic.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e4552d3 and c3bbb0a.

📒 Files selected for processing (1)

• ui/components/ui/headersTable.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**

⚙️ CodeRabbit configuration file

always check the stack if there is one for the current PR. do not give localized reviews for the PR, always see all changes in the light of the whole stack of PRs (if there is a stack, if there is no stack you can continue to make localized suggestions/reviews)

Files:

• ui/components/ui/headersTable.tsx

🧬 Code graph analysis (1)

ui/components/ui/headersTable.tsx (1)

ui/components/ui/table.tsx (1)

• TableRow (71-71)

⏰ Context from checks skipped due to timeout of 900000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)

• GitHub Check: Graphite / mergeability_check
• GitHub Check: Graphite / mergeability_check
• GitHub Check: Graphite / mergeability_check
• GitHub Check: Graphite / mergeability_check
• GitHub Check: Graphite / mergeability_check
• GitHub Check: Graphite / mergeability_check

[akshaydeo]

Merge activity

• Dec 17, 6:58 AM UTC: A user started a stack merge that includes this pull request via Graphite.
• Dec 17, 6:59 AM UTC: @akshaydeo merged this pull request with Graphite.