fix: reset to general step when dialog opens by MichaelUnkey · Pull Request #4241 · unkeyed/unkey

MichaelUnkey · 2025-11-05T18:02:46Z

What does this PR do?

Fixes # (issue)
Eng-2108

Type of change

Bug fix (non-breaking change which fixes an issue)
Chore (refactoring code, technical debt, workflow improvements)
Enhancement (small improvements)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

How should this be tested?

key creation dialog still works without errors
After creating a key and re opening dialog it should be reset to general step

Checklist

Required

Appreciated

If a UI change was made: Added a screen recording or screenshots to this PR
Updated the Unkey Docs if changes were necessary

linear · 2025-11-05T18:02:49Z

ENG-2180 UI: Key create modal keeps some state after creating

changeset-bot · 2025-11-05T18:02:50Z

⚠️ No Changeset found

Latest commit: 0ac714d

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

vercel · 2025-11-05T18:02:50Z

The latest updates on your projects. Learn more about Vercel for GitHub.

2 Skipped Deployments

Project	Deployment	Preview	Comments	Updated (UTC)
dashboard	Ignored	Preview		Nov 5, 2025 6:05pm
engineering	Ignored	Preview		Nov 5, 2025 6:05pm

coderabbitai · 2025-11-05T18:03:01Z

📝 Walkthrough

Walkthrough

The CreateKeyDialog component is refactored to implement a dialog reset mechanism using a dialogKey state. The dialogKey increments on dialog open, close, and key creation completion, forcing NavigableDialogRoot remounting to ensure consistent state initialization with "general" as the default section.

Changes

Cohort / File(s)	Change Summary
Dialog state reset mechanism `apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/index.tsx`	Added `dialogKey` state to force remounting of NavigableDialogRoot; incremented on dialog open/close and key creation completion; passed as key prop to NavigableDialogRoot; set `initialSelectedId` to "general" in navigable dialog header.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Single file modified with straightforward state management changes
All modifications relate to a cohesive dialog lifecycle pattern (dialogKey increments)
No complex logic; changes consist of state hooks, prop updates, and callback handlers

Possibly related PRs

chore: Dialog container into UI step 1 #3294: Refactored and re-exported NavigableDialog components with updated imports to @unkey/ui, directly affecting the component dependencies used in this file.
fix: remaining issue #3278: Centralizes close action handling in KeyCreatedSuccessDialog within the same create-key dialog flow, complementing this PR's dialog state reset mechanism.

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and specifically describes the main change: resetting the dialog to the general step when it opens, which directly relates to the code changes shown in the summary.
Description check	✅ Passed	The description includes all required sections: issue reference (Eng-2108), type of change (bug fix), testing instructions, and most required checklist items completed. The testing section clearly explains the expected behavior.

✨ 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 eng-2180-ui-key-create-modal-keeps-some-state-after-creating

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6e6fbc8 and 0ac714d.

📒 Files selected for processing (1)

apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/index.tsx (4 hunks)

🧰 Additional context used

🧠 Learnings (3)

📓 Common learnings

Learnt from: imeyer
Repo: unkeyed/unkey PR: 3755
File: .github/workflows/runbook-freshness-check.yaml:157-173
Timestamp: 2025-08-08T14:59:52.283Z
Learning: Repo unkeyed/unkey: When a CI/workflow fix is deferred, imeyer prefers a thorough GitHub issue be opened with sections (Summary, Impact, Where, Repro, Observed vs Expected, Acceptance Criteria, Validation Plan, Out of Scope, References) and assigned to imeyer, including backlinks to the originating PR and comment.

Learnt from: imeyer
Repo: unkeyed/unkey PR: 3755
File: .github/actions/setup-node/action.yaml:0-0
Timestamp: 2025-08-08T15:10:46.436Z
Learning: Repo: unkeyed/unkey — Preference: If imeyer comments “issue” on a PR thread, automatically open a thorough GitHub issue (Summary, Impact, Where, Observed vs Expected, Acceptance Criteria, Validation Plan, Out of Scope, References), include backlinks to the PR and comment, and assign to imeyer.

Learnt from: imeyer
Repo: unkeyed/unkey PR: 3755
File: .github/workflows/job_detect_changes.yaml:111-114
Timestamp: 2025-08-08T16:10:00.224Z
Learning: Repo: unkeyed/unkey — When imeyer writes “make me an issue” on a PR thread, automatically open a thorough GitHub issue (Summary, Impact, Where, Repro, Observed vs Expected, Acceptance Criteria, Validation Plan, Out of Scope, References), include backlinks to the PR and comment, and assign to imeyer.

Learnt from: ogzhanolguncu
Repo: unkeyed/unkey PR: 3156
File: apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/index.tsx:112-0
Timestamp: 2025-04-22T11:49:06.167Z
Learning: In the CreateKeyDialog component of Unkey, section navigation is designed to always allow progression even if validation fails, as visual indicators display the validation state of each section.

📚 Learning: 2025-04-22T11:49:06.167Z

Learnt from: ogzhanolguncu
Repo: unkeyed/unkey PR: 3156
File: apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/index.tsx:112-0
Timestamp: 2025-04-22T11:49:06.167Z
Learning: In the CreateKeyDialog component of Unkey, section navigation is designed to always allow progression even if validation fails, as visual indicators display the validation state of each section.

Applied to files:

apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/index.tsx

📚 Learning: 2024-10-04T17:27:09.821Z

Learnt from: chronark
Repo: unkeyed/unkey PR: 2146
File: apps/dashboard/app/(app)/apis/[apiId]/settings/default-prefix.tsx:74-75
Timestamp: 2024-10-04T17:27:09.821Z
Learning: In `apps/dashboard/app/(app)/apis/[apiId]/settings/default-prefix.tsx`, the hidden `<input>` elements for `workspaceId` and `keyAuthId` work correctly without being registered with React Hook Form.

Applied to files:

apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/index.tsx

⏰ 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). (1)

GitHub Check: Test Dashboard / Test Dashboard

🔇 Additional comments (5)

apps/dashboard/app/(app)/[workspaceSlug]/apis/[apiId]/_components/create-key/index.tsx (5)

54-54: LGTM! Clean remounting pattern.

The dialogKey state is correctly initialized for forcing component remounts when navigation needs to be reset.

108-109: LGTM! Proper sequencing of reset operations.

The dialogKey increment correctly occurs after closing the dialog, ensuring a clean remount before the next open. The comment clearly explains the intent.

112-119: LGTM! Correct reset behavior with form persistence.

The sequence of operations is correct:

Form values are saved to memory (line 114)

Dialog is remounted via dialogKey increment (line 116)

Dialog closes (line 118)

React's batching ensures these updates happen together without visual glitches. The form values persist across remounts (via usePersistedForm), while navigation state resets to "general" on next open—this appears to be the intended UX.

169-169: LGTM! Standard React remount pattern.

Using dialogKey as the key prop correctly forces NavigableDialogRoot to remount when the key changes, resetting all internal navigation state.

186-186: LGTM! Essential for ensuring consistent initial state.

Explicitly setting initialSelectedId="general" ensures the dialog consistently starts at the general section on each remount, which is critical for the reset behavior to work correctly.

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.}

github-actions · 2025-11-05T18:03:34Z

Thank you for following the naming conventions for pull request titles! 🙏

…-ui-key-create-modal-keeps-some-state-after-creating

mcstepp

tested in vercel preview, it works

graphite-app · 2025-11-05T18:45:48Z

graphite-app · 2025-11-05T18:50:11Z

Graphite Automations

"Post a GIF when PR approved" took an action on this PR • (11/05/25)

1 gif was posted to this PR based on Andreas Thomas's automation.

reset to general

80e88af

MichaelUnkey requested review from chronark, mcstepp, ogzhanolguncu and perkinsjr as code owners November 5, 2025 18:02

Merge branch 'main' of https://github.com/unkeyed/unkey into eng-2180…

0ac714d

…-ui-key-create-modal-keeps-some-state-after-creating

MichaelUnkey enabled auto-merge November 5, 2025 18:04

chronark approved these changes Nov 5, 2025

View reviewed changes

mcstepp approved these changes Nov 5, 2025

View reviewed changes

MichaelUnkey added this pull request to the merge queue Nov 5, 2025

Merged via the queue into main with commit 46769f4 Nov 5, 2025
19 checks passed

MichaelUnkey deleted the eng-2180-ui-key-create-modal-keeps-some-state-after-creating branch November 5, 2025 18:47

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: reset to general step when dialog opens#4241

fix: reset to general step when dialog opens#4241
MichaelUnkey merged 2 commits intomainfrom
eng-2180-ui-key-create-modal-keeps-some-state-after-creating

MichaelUnkey commented Nov 5, 2025

Uh oh!

linear bot commented Nov 5, 2025

Uh oh!

changeset-bot bot commented Nov 5, 2025 •

edited

Loading

Uh oh!

vercel bot commented Nov 5, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Nov 5, 2025 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Uh oh!

github-actions bot commented Nov 5, 2025 •

edited

Loading

Uh oh!

mcstepp left a comment

Uh oh!

graphite-app bot commented Nov 5, 2025

Uh oh!

Uh oh!

graphite-app bot commented Nov 5, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

MichaelUnkey commented Nov 5, 2025

What does this PR do?

Type of change

How should this be tested?

Checklist

Required

Appreciated

Uh oh!

linear bot commented Nov 5, 2025

Uh oh!

changeset-bot bot commented Nov 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

vercel bot commented Nov 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Nov 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Pre-merge checks and finishing touches

Uh oh!

github-actions bot commented Nov 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

mcstepp left a comment

Choose a reason for hiding this comment

Uh oh!

graphite-app bot commented Nov 5, 2025

Uh oh!

Uh oh!

graphite-app bot commented Nov 5, 2025

Graphite Automations

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot bot commented Nov 5, 2025 •

edited

Loading

vercel bot commented Nov 5, 2025 •

edited

Loading

coderabbitai bot commented Nov 5, 2025 •

edited

Loading

github-actions bot commented Nov 5, 2025 •

edited

Loading