fix(webapp): cancel button in API key regeneration modal #2878

nicktrn · 2026-01-13T17:08:36Z

The Cancel button was missing an onClick handler to close the modal dialog. This caused confusing behavior where clicking Cancel would not dismiss the dialog. Also added type="button" to prevent form submission since the button is inside a form.

…the modal The Cancel button was missing an onClick handler to close the modal dialog. This caused confusing behavior where clicking Cancel would not dismiss the dialog. Also added type="button" to prevent form submission since the button is inside a form. Slack thread: https://triggerdotdev.slack.com/archives/C04CR1HUWBV/p1768323370953509

changeset-bot · 2026-01-13T17:08:40Z

⚠️ No Changeset found

Latest commit: 1965d1b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

coderabbitai · 2026-01-13T17:08:54Z

Walkthrough

The Cancel button in RegenerateApiKeyModalContent was updated to explicitly prevent form submission. The button now includes the type="button" attribute and an onClick={closeModal} handler, ensuring that clicking Cancel closes the modal without submitting the form. This change clarifies the button's intended behavior with explicit attributes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~7 minutes

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description explains what was fixed and why (missing onClick handler and type attribute), but does not follow the required template structure with sections like Testing and Changelog.	Restructure the description to include all required sections: Closes #issue, Testing steps, Changelog, and Screenshots sections as specified in the template.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the fix: the cancel button in the API key regeneration modal now closes the modal properly.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

📜 Recent review details

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between bb25340 and 1965d1b.

📒 Files selected for processing (1)

apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx

🧰 Additional context used

📓 Path-based instructions (7)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{ts,tsx}: Use types over interfaces for TypeScript
Avoid using enums; prefer string unions or const objects instead

Every Trigger.dev task must be exported; use task() function with unique id and run async function

Files:

apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx

{packages/core,apps/webapp}/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use zod for validation in packages/core and apps/webapp

Files:

apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx

**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use function declarations instead of default exports

Files:

apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx

apps/webapp/app/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/webapp.mdc)

Access all environment variables through the env export of env.server.ts instead of directly accessing process.env in the Trigger.dev webapp

In webapp development, access environment variables via env export from apps/webapp/app/env.server.ts; never use process.env directly

Files:

apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx

apps/webapp/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/webapp.mdc)

apps/webapp/**/*.{ts,tsx}: When importing from @trigger.dev/core in the webapp, use subpath exports from the package.json instead of importing from the root path
Follow the Remix 2.1.0 and Express server conventions when updating the main trigger.dev webapp

Files:

apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx

**/*.{js,ts,jsx,tsx,json,md,css,scss}

📄 CodeRabbit inference engine (AGENTS.md)

Format code using Prettier

Files:

apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx

**/*.{ts,tsx,js}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx,js}: Import from @trigger.dev/core using subpaths only; never import from root of @trigger.dev/core
Always import task definitions from @trigger.dev/sdk, never from @trigger.dev/sdk/v3 or deprecated client.defineJob pattern

Files:

apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx

🧬 Code graph analysis (1)

apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx (1)

apps/webapp/app/components/primitives/Buttons.tsx (1)

Button (296-329)

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

GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (6, 8)
GitHub Check: units / internal / 🧪 Unit Tests: Internal (5, 8)
GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (5, 8)
GitHub Check: units / internal / 🧪 Unit Tests: Internal (6, 8)
GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (1, 8)
GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (3, 8)
GitHub Check: units / internal / 🧪 Unit Tests: Internal (4, 8)
GitHub Check: e2e / 🧪 CLI v3 tests (windows-latest - npm)
GitHub Check: units / internal / 🧪 Unit Tests: Internal (2, 8)
GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (7, 8)
GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (2, 8)
GitHub Check: units / internal / 🧪 Unit Tests: Internal (8, 8)
GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (8, 8)
GitHub Check: units / webapp / 🧪 Unit Tests: Webapp (4, 8)
GitHub Check: units / internal / 🧪 Unit Tests: Internal (1, 8)
GitHub Check: units / internal / 🧪 Unit Tests: Internal (3, 8)
GitHub Check: units / internal / 🧪 Unit Tests: Internal (7, 8)
GitHub Check: units / packages / 🧪 Unit Tests: Packages (1, 1)
GitHub Check: e2e / 🧪 CLI v3 tests (windows-latest - pnpm)
GitHub Check: e2e / 🧪 CLI v3 tests (ubuntu-latest - pnpm)
GitHub Check: e2e / 🧪 CLI v3 tests (ubuntu-latest - npm)
GitHub Check: typecheck / typecheck
GitHub Check: Analyze (javascript-typescript)

🔇 Additional comments (1)

apps/webapp/app/components/environments/RegenerateApiKeyModal.tsx (1)

97-101: LGTM!

The fix correctly addresses both issues:

type="button" prevents the default submit behavior when the button is inside a form

onClick={closeModal} properly dismisses the modal on cancel

Clean and minimal change.

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

claude · 2026-01-13T17:09:52Z

PR Review: fix(webapp): cancel button in API key regeneration modal

Summary

This PR fixes the Cancel button in the API key regeneration modal by adding the missing onClick handler and type="button" attribute.

Code Quality ✅

The fix is correct and functional. Adding onClick={closeModal} and type="button" properly closes the dialog and prevents unintended form submission.

Style Suggestion (Optional)

Looking at similar patterns in the codebase, many cancel buttons inside dialogs use DialogClose from Radix UI instead of manually calling closeModal:

// Current approach (functional)
<Button variant={"tertiary/medium"} type="button" onClick={closeModal}>
  Cancel
</Button>

// Alternative pattern used elsewhere in the codebase
import { DialogClose } from "@radix-ui/react-dialog";

<DialogClose asChild>
  <Button variant={"tertiary/medium"}>Cancel</Button>
</DialogClose>

Examples using DialogClose:

apps/webapp/app/components/Feedback.tsx:165-167
apps/webapp/app/components/runs/v3/CancelRunDialog.tsx:44-46
apps/webapp/app/routes/account.tokens/route.tsx:274-276

Using DialogClose is slightly cleaner since it doesn't require threading the closeModal callback through props, and automatically handles the close behavior. However, the current implementation is perfectly acceptable since the component already has closeModal available via props, and there's at least one other place in the codebase using this same pattern (environment-variables/route.tsx:478).

Potential Issues ❓

None identified. The fix is straightforward and low-risk.

Security Concerns 🔒

None. This is a UI-only change with no security implications.

Test Coverage

This is a small UI fix to a modal component. Manual testing should be sufficient - no additional automated tests are needed.

Verdict

Approve ✅ - The fix is correct, addresses the reported issue, and follows patterns used elsewhere in the codebase.

0ski

LGTM!

nicktrn enabled auto-merge (squash) January 13, 2026 17:08

0ski approved these changes Jan 13, 2026

View reviewed changes

nicktrn merged commit b042b0b into main Jan 13, 2026
32 checks passed

nicktrn deleted the claude/slack-fix-api-key-cancel-76hUo branch January 13, 2026 17:26

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

fix(webapp): cancel button in API key regeneration modal #2878

fix(webapp): cancel button in API key regeneration modal #2878

Uh oh!

nicktrn commented Jan 13, 2026

Uh oh!

changeset-bot bot commented Jan 13, 2026

Uh oh!

coderabbitai bot commented Jan 13, 2026 •

edited

Loading

Uh oh!

claude bot commented Jan 13, 2026

Uh oh!

0ski left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

fix(webapp): cancel button in API key regeneration modal #2878

fix(webapp): cancel button in API key regeneration modal #2878

Uh oh!

Conversation

nicktrn commented Jan 13, 2026

Uh oh!

changeset-bot bot commented Jan 13, 2026

⚠️ No Changeset found

Uh oh!

coderabbitai bot commented Jan 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Estimated code review effort

Uh oh!

claude bot commented Jan 13, 2026

PR Review: fix(webapp): cancel button in API key regeneration modal

Summary

Code Quality ✅

Style Suggestion (Optional)

Potential Issues ❓

Security Concerns 🔒

Test Coverage

Verdict

Uh oh!

0ski left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

coderabbitai bot commented Jan 13, 2026 •

edited

Loading