[Issue #12624] Update api key Delete modal

[kkrug]

Summary

Fixes #12624

Changes proposed

• Updated ApiKeyModal.tsx to bring delete mode in line with the Figma design:
  • initial state: Delete "{name}" API key? title, new description, no placeholder, yellow "Delete key" button with a trash icon
  • errors: "Text does not match." field error for blank or misspelled input, plus an "Unable to delete API key" alert that keeps the typed input and leaves the button active for retry
  • success: closes the modal instead of showing a success screen
  • shares the fixed-size loading button with create, gives each key its own confirmation input id, and hides the page alert whenever any API key modal opens
• Created ApiKeyAlertProvider.tsx to hold a success message for the page, render it as a slim success alert in a role="status" region, and move focus to #main-content when one is shown
• Updated TableWithResponsiveHeader.tsx to accept optional rowKeys and to key cells by column, so stateful cell content stays with its row when rows are added or reordered
• Updated ApiKeyTableClient.tsx to pass each key's api_key_id as its row key and show the deleted key message after a delete
• Updated page.tsx to wrap the dashboard in the alert provider and place the alert between the header and the table
• Updated index.ts to add and revise the delete modal and deleted key alert strings, and remove the unused delete placeholder and success modal strings
• Updated ApiKeyModal.test.tsx to cover the new delete states (validation, preserved input with retry on server error, loading, Enter to submit, closing on success, unique input ids, a11y with errors shown), and removed the global useRef mock
• Updated ApiKeyTableClient.test.tsx to add a regression test for a new key added at the top, plus tests for the alert after a delete and its removal when the create, edit, or delete modal opens
• Updated ApiKeyTable.test.tsx to use the new strings, find the open modal by its is-visible class, and drop the global useRef mock
• Created ApiKeyAlertProvider.test.tsx to cover showing, replacing, and hiding the alert, focus moving to main content, and an a11y scan
• Updated TableWithResponsiveHeader.test.tsx to verify cell state stays with its row when rowKeys are provided

Context for reviewers

Keys come back newest-first and the table keyed rows and cells by index, so a newly created key took over row 0's existing modals and their state. That is how deleting a new key could show the wrong key's name. Keying rows by api_key_id fixes it, and closing the modal on success removes the stale success screen entirely.

Validation steps

Confirm tests pass.

Local testing:

1. Run the frontend locally, sign in, and go to /developers/api-dashboard with at least two keys (create new ones if necessary).
2. Click a key's delete icon. Confirm the title includes the key name, the new description shows, the input has no placeholder, and the "Delete key" button is yellow with the trash icon.
3. Click "Delete key" with an empty field, then with a misspelled word. Confirm "Text does not match." appears both times and nothing is deleted.
4. Type delete and submit. Confirm the modal closes, focus moves to the main content, the row is removed, and a success alert above the table reads API key "{name}" has been deleted successfully.
5. Delete another key. Confirm its alert replaces the first one instead of stacking.
6. Open the create, edit, or delete modal. Confirm the alert goes away.
7. Delete your last key. Confirm the alert still shows above the empty state.
8. Create a new key, close the create modal, then delete that same key right away. Confirm the new key is the one removed and the alert shows its name.
9. To check the server error, block the DELETE /api/user/api-keys/{id} request in devtools and submit. Confirm the "Unable to delete API key" alert appears, delete stays in the input, and the button can be clicked again.

[nkhazi]

Looks good. Keying the rows by api_key_id makes sure the right key gets deleted after a new one is added, and the test covers it well. The shared submit button and the page-level alert are nice too.

Approved ✅