Improve partner link modal #3029

devkiran · 2025-10-29T17:19:54Z

Summary by CodeRabbit

New Features
- Added automatic key generation for partner links based on session user information.
Improvements
- Enhanced validation for link keys with inline error messaging.
- Improved form usability with refined auto-focus behavior for inputs.

vercel · 2025-10-29T17:19:59Z

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

Project	Deployment	Preview	Updated (UTC)
dub	Ready	Preview	Oct 29, 2025 5:25pm

coderabbitai · 2025-10-29T17:20:25Z

Walkthrough

The PR removes nanoid-based suffix generation from partner link keys in the controls component while simultaneously adding session-aware auto-key generation logic with validation to the partner link modal, shifting key generation responsibility and changing initialization behavior.

Changes

Cohort / File(s)	Summary
Partner Link Controls `apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/links/partner-link-controls.tsx`	Removed nanoid dependency and replaced dynamic key construction (`${link.key}-${nanoid(6)}`) with empty string (`""`) in link objects and duplicate-link modal setup.
Partner Link Modal `apps/web/ui/modals/partner-link-modal.tsx`	Added session-aware auto-key generation deriving from user name and random suffix; introduced keyInputFocused state tracking; extended form validation with required key error messaging; adjusted autofocus behavior; added error handling display; consolidated form state extraction and watch declarations.

Sequence Diagram

sequenceDiagram
    participant User
    participant Modal as Partner Link Modal
    participant Form as react-hook-form
    participant Session as Session Data

    rect rgb(200, 220, 255)
    Note over Modal,Form: Old Flow (Removed)
    User->>Modal: Open modal with existing link
    Modal->>Modal: Generate key: ${link.key}-${nanoid(6)}
    end

    rect rgb(220, 255, 220)
    Note over Modal,Form: New Flow (Added)
    User->>Modal: Open modal to create new link
    Modal->>Session: Retrieve session data
    Session-->>Modal: User name
    Modal->>Modal: Auto-generate key from name + suffix
    Modal->>Form: Write key without marking dirty
    User->>Modal: Focus key input
    Modal->>Modal: Set keyInputFocused = true
    User->>Modal: Blur key input or submit
    Form->>Form: Validate key (required)
    Form-->>Modal: Return validation errors
    Modal->>User: Display error if present
    end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Key generation logic shift: Verify session-aware auto-generation correctly derives keys from user data and handles edge cases (missing session, null names)
Form validation integration: Ensure keyInputFocused state properly gates auto-generation and that react-hook-form validation aligns with submission behavior
Autofocus behavior changes: Confirm autofocus adjustments work correctly across device types and don't interfere with user interactions
State consolidation: Review removal of duplicated watch declarations to ensure no logic is lost

Possibly related PRs

PR Partner link card updates #2916: Modifies partner-link-controls.tsx key generation—adds nanoid-based key generation and duplicate-link flow, contrasting with this PR's removal of nanoid suffix generation
PR Simplify invite partners step in onboarding flow #2587: Handles partner referral "key" value generation and validation across UI components and link-creation flow using nanoid
PR Update partner link settings #2712: Modifies the same files (partner-link-controls.tsx and partner-link-modal.tsx) with related partner link UI behavior and key generation logic

Suggested reviewers

steven-tey

Poem

🐰 Hop along with keys that glow,
No nanoid suffixes stealing the show,
Session knows your name so well,
Auto-generated links have quite a tale to tell!
Form validation stands so true,
Partner links now refresh anew! ✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
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 (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title "Improve partner link modal" is directly related to the primary changes in the pull request, which focus on enhancing the partner-link-modal.tsx file. The changes introduce session awareness, auto-key generation, improved form validation, enhanced UX for key input, and better error handling—all of which represent improvements to the modal's functionality. While the title uses a somewhat generic verb "Improve," it specifically identifies the component being modified and clearly conveys the overall intent, which would allow a teammate reviewing the history to understand the primary change. The title also appropriately does not attempt to capture every detail, as the instructions acknowledge this is expected.

✨ 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 improve-partner-link-modal

📜 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 5d86b60 and 961505f.

📒 Files selected for processing (2)

apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/links/partner-link-controls.tsx (1 hunks)
apps/web/ui/modals/partner-link-modal.tsx (6 hunks)

🧰 Additional context used

🧠 Learnings (2)

📚 Learning: 2025-06-06T07:59:03.120Z

Learnt from: devkiran
PR: dubinc/dub#2177
File: apps/web/lib/api/links/bulk-create-links.ts:66-84
Timestamp: 2025-06-06T07:59:03.120Z
Learning: In apps/web/lib/api/links/bulk-create-links.ts, the team accepts the risk of potential undefined results from links.find() operations when building invalidLinks arrays, because existing links are fetched from the database based on the input links, so matches are expected to always exist.

Applied to files:

apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/links/partner-link-controls.tsx

📚 Learning: 2025-08-25T21:03:24.285Z

Learnt from: TWilson023
PR: dubinc/dub#2736
File: apps/web/app/app.dub.co/(dashboard)/[slug]/(ee)/program/bounties/bounty-card.tsx:1-1
Timestamp: 2025-08-25T21:03:24.285Z
Learning: In Next.js App Router, Server Components that use hooks can work without "use client" directive if they are only imported by Client Components, as they get "promoted" to run on the client side within the Client Component boundary.

Applied to files:

apps/web/ui/modals/partner-link-modal.tsx

🧬 Code graph analysis (1)

apps/web/ui/modals/partner-link-modal.tsx (1)

apps/web/lib/swr/use-program-enrollment.ts (1)

useProgramEnrollment (7-37)

⏰ 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: build

🔇 Additional comments (11)

apps/web/ui/modals/partner-link-modal.tsx (10)
32-32: LGTM: Imports support the new auto-generation feature.

The nanoid and useSession imports are appropriately added to support session-aware key generation.

Also applies to: 36-36

184-184: Session and focus state additions look good.

The session data and focus tracking state are properly initialized to support the auto-generation feature.

Also applies to: 186-186

224-224: LGTM: Error state extraction is correct.

Adding errors to the destructured form state follows react-hook-form patterns and enables the new error display functionality.

235-235: Good consolidation of watch calls.

Combining the watch for both key and pathname into a single call is more efficient than separate watch declarations.

237-247: Verify auto-generation timing and UX behavior.

The auto-generation logic works correctly but has some edge cases to consider:

Session loading timing: If the session loads after the modal opens, the key will suddenly populate. This could be surprising if the user is already looking at the empty field.

Manual clearing behavior: If a user manually clears the key field and unfocuses, it will auto-regenerate. Verify this is the intended UX.

Reduced suffix length: Switching from nanoid(6) to nanoid(4) reduces collision resistance from ~56B to ~14.7M combinations. This should be sufficient for typical use cases but is worth noting.

Consider adding a check for session loading state to prevent unexpected key population:
-  const { data: session } = useSession();
+  const { data: session, status } = useSession();
-  if (!key && name && !keyInputFocused && !isLoading) {
+  if (!key && name && !keyInputFocused && !isLoading && status === "authenticated") {
398-400: LGTM: Key validation is appropriate.

Adding required validation for the short link key is correct. With auto-generation in place, users should rarely see this error unless their session lacks a name.

403-405: LGTM: Focus handling is well-implemented.

The focus/blur handlers correctly track input focus state to prevent auto-generation interference, and the autofocus logic appropriately prioritizes the key input when the destination URL is hidden.

412-413: LGTM: Error styling follows standard patterns.

The conditional error styling for the key input is implemented correctly and follows common form validation UX patterns.

419-423: LGTM: Error message display is accessible and clear.

The error message implementation follows accessibility best practices with a proper id attribute and clear styling.

458-458: LGTM: Pathname autofocus logic is correct.

The autofocus condition !hideDestinationUrl && !isMobile is the proper complement to the key input's autofocus logic, ensuring exactly one field is focused based on visibility.
apps/web/app/(ee)/partners.dub.co/(dashboard)/programs/[programSlug]/(enrolled)/links/partner-link-controls.tsx (1)

38-38: Verify the UX change for duplicated links.

Changing the duplicate link key from ${link.key}-${nanoid(6)} to an empty string fundamentally changes the key generation behavior:

Previous behavior: Duplicated link keys resembled the original (e.g., original-abc123)

New behavior: Duplicated links get auto-generated keys based on the user's name (e.g., John-xyz1), same as brand new links

This makes duplicated links less distinguishable from new links. Verify this is the intended UX, as users might expect duplicated links to maintain some connection to the original link's identifier.

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

devkiran added 2 commits October 29, 2025 22:49

Update partner-link-controls.tsx

8566ff7

Update partner-link-modal.tsx

961505f

devkiran requested a review from steven-tey October 29, 2025 17:20

steven-tey approved these changes Oct 29, 2025

View reviewed changes

vercel bot deployed to Preview October 29, 2025 17:25 View deployment

steven-tey merged commit 7116e48 into main Oct 29, 2025
7 of 9 checks passed

steven-tey deleted the improve-partner-link-modal branch October 29, 2025 17:56

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Improve partner link modal #3029

Improve partner link modal #3029

Uh oh!

devkiran commented Oct 29, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

vercel bot commented Oct 29, 2025 •

edited

Loading

Uh oh!

coderabbitai bot commented Oct 29, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Improve partner link modal #3029

Improve partner link modal #3029

Uh oh!

Conversation

devkiran commented Oct 29, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Walkthrough

Changes

Sequence Diagram

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

devkiran commented Oct 29, 2025 •

edited by coderabbitai bot

Loading

vercel bot commented Oct 29, 2025 •

edited

Loading

coderabbitai bot commented Oct 29, 2025 •

edited

Loading