[WEB-5317] chore: enable multi-select for use case in onboarding flow #8049
Conversation
anmolsinghbhatia
requested review from
pablohashescobar and
vamsikrishnamathala
anmolsinghbhatia
added
🌐frontend
⚙️backend
🔄migrations
|
Linked to Plane Work Item(s) This comment was auto-generated by Plane |
|
Warning Rate limit exceeded@anmolsinghbhatia has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 5 minutes and 38 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. 📒 Files selected for processing (2)
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughThe onboarding flow's use-case field is converted from single-string to multi-string-array selection. Updates span form type definitions, UI from single-select to multi-select chips, validation rules requiring at least one selection, payload serialization (array joined with ". "), and event tracking. Additionally, header name derivation logic shifts from nullish-coalescing to explicit conditionals. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
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. Comment |
…-select-use-case-onboarding-and-refactoring
…-select-use-case-onboarding-and-refactoring
…-select-use-case-onboarding-and-refactoring
|
You have run out of free Bugbot PR reviews for this billing cycle. This will reset on December 20. To receive reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
apps/web/core/components/onboarding/profile-setup.tsx (1)
554-558: Usecnfor conditional class names.As noted in a previous review, use the
cnutility for conditional class composition instead of template literals for consistency with the codebase patterns.<div key={userDomain} - className={`flex-shrink-0 border-[0.5px] hover:cursor-pointer hover:bg-custom-background-90 ${ - isSelected ? "border-custom-primary-100" : "border-custom-border-300" - } rounded px-3 py-1.5 text-sm font-medium`} + className={cn( + "flex-shrink-0 border-[0.5px] hover:cursor-pointer hover:bg-custom-background-90 rounded px-3 py-1.5 text-sm font-medium", + isSelected ? "border-custom-primary-100" : "border-custom-border-300" + )} onClick={() => {
🧹 Nitpick comments (2)
apps/web/core/components/onboarding/header.tsx (1)
59-63: Minor: Potential trailing space whenlast_nameis empty.When
first_nameis truthy butlast_nameis empty or undefined, the result will be"FirstName "with a trailing space. Consider trimming or conditionally including the space.const userName = user?.display_name ? user?.display_name : user?.first_name - ? `${user?.first_name} ${user?.last_name ?? ""}` + ? `${user?.first_name}${user?.last_name ? ` ${user.last_name}` : ""}` : user?.email;apps/web/core/components/onboarding/steps/usecase/root.tsx (1)
94-94: Simplify boolean expression.The expression
!isSubmitting && isValid ? false : trueis equivalent toisSubmitting || !isValid.- const isButtonDisabled = !isSubmitting && isValid ? false : true; + const isButtonDisabled = isSubmitting || !isValid;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/web/core/components/onboarding/header.tsx(1 hunks)apps/web/core/components/onboarding/profile-setup.tsx(7 hunks)apps/web/core/components/onboarding/steps/profile/root.tsx(1 hunks)apps/web/core/components/onboarding/steps/usecase/root.tsx(4 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx,mts,cts}
📄 CodeRabbit inference engine (.github/instructions/typescript.instructions.md)
**/*.{ts,tsx,mts,cts}: Useconsttype parameters for more precise literal inference in TypeScript 5.0+
Use thesatisfiesoperator to validate types without widening them
Leverage inferred type predicates to reduce the need for explicitisreturn types in filter/check functions
UseNoInfer<T>utility to block inference for specific type arguments when they should be determined by other arguments
Utilize narrowing inswitch(true)blocks for control flow analysis (TypeScript 5.3+)
Rely on narrowing from direct boolean comparisons for type guards
Trust preserved narrowing in closures when variables aren't modified after the check (TypeScript 5.4+)
Use constant indices to narrow object/array properties (TypeScript 5.5+)
Use standard ECMAScript decorators (Stage 3) instead of legacyexperimentalDecorators
Useusingdeclarations for explicit resource management with Disposable pattern instead of manual cleanup (TypeScript 5.2+)
Usewith { type: "json" }for import attributes; avoid deprecatedassertsyntax (TypeScript 5.3/5.8+)
Useimport typeexplicitly when importing types to ensure they are erased during compilation, respectingverbatimModuleSyntaxflag
Use.ts,.mts,.ctsextensions inimport typestatements (TypeScript 5.2+)
Useimport type { Type } from "mod" with { "resolution-mode": "import" }for specific module resolution contexts (TypeScript 5.3+)
Use new iterator methods (map, filter, etc.) if targeting modern environments (TypeScript 5.6+)
Utilize newSetmethods likeunion,intersection, etc., when available (TypeScript 5.5+)
UseObject.groupBy/Map.groupBystandard methods for grouping instead of external libraries (TypeScript 5.4+)
UsePromise.withResolvers()for creating promises with exposed resolve/reject functions (TypeScript 5.7+)
Use copying array methods (toSorted,toSpliced,with) for immutable array operations (TypeScript 5.2+)
Avoid accessing instance fields viasuperin classes (TypeScript 5....
Files:
apps/web/core/components/onboarding/steps/profile/root.tsxapps/web/core/components/onboarding/header.tsxapps/web/core/components/onboarding/steps/usecase/root.tsxapps/web/core/components/onboarding/profile-setup.tsx
🧠 Learnings (1)
📚 Learning: 2025-10-10T13:25:14.810Z
Learnt from: gakshita
Repo: makeplane/plane PR: 7949
File: apps/web/core/components/issues/issue-modal/form.tsx:183-189
Timestamp: 2025-10-10T13:25:14.810Z
Learning: In `apps/web/core/components/issues/issue-modal/form.tsx`, the form reset effect uses a `dataResetProperties` dependency array prop (default: []) to give parent components explicit control over when the form resets. Do not suggest adding the `data` prop itself to the dependency array, as this would cause unwanted resets on every render when the data object reference changes, disrupting user input. The current pattern is intentional and allows the parent to trigger resets only when specific conditions are met.
Applied to files:
apps/web/core/components/onboarding/profile-setup.tsx
🧬 Code graph analysis (1)
apps/web/core/components/onboarding/steps/usecase/root.tsx (4)
apps/web/core/components/onboarding/steps/profile/root.tsx (1)
TProfileSetupFormValues(30-39)packages/types/src/current-user/profile.ts (1)
TUserProfile(1-30)packages/types/src/users.ts (1)
TUserProfile(57-84)packages/constants/src/workspace.ts (1)
USE_CASES(347-353)
⏰ 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). (3)
- GitHub Check: CodeQL analysis (javascript-typescript)
- GitHub Check: Agent
- GitHub Check: Build and lint web apps
🔇 Additional comments (7)
apps/web/core/components/onboarding/steps/profile/root.tsx (1)
30-39: LGTM!The type change from
stringtostring[]foruse_casecorrectly supports the multi-select functionality. The exported type is properly aligned with the usage in other onboarding components.apps/web/core/components/onboarding/steps/usecase/root.tsx (3)
24-26: LGTM!Default value correctly initializes as an empty array with proper type assertion.
105-129: LGTM!The multi-select toggle logic is correctly implemented:
- Uses
includes()for array membership check- Properly handles add/remove with filter and spread
- Prevents default form submission with
e.preventDefault()
37-42: Delimiter consistency is correctly implemented throughout the use_case data flow.The form saves multiple selections by joining them with
". "(profile-setup.tsx lines 142, 215), and this component correctly splits on the same delimiter when loading. Legacy single-value data without the delimiter will properly return a single-element array viasplit(), which is the intended behavior. No changes needed.apps/web/core/components/onboarding/profile-setup.tsx (3)
29-47: LGTM!Type definition and default value correctly updated to support multi-select with
string[].
141-144: LGTM!Payload construction correctly joins the array with
". "delimiter, consistent with the approach inusecase/root.tsx.
545-548: LGTM!Validation rules correctly enforce at least one selection with both
requiredand customvalidatefunction for proper error messaging.
There was a problem hiding this comment.
Pull request overview
This PR converts the use case selection in the onboarding flow from single-select to multi-select, allowing users to choose multiple use cases describing how they plan to use Plane. The backend stores these as a period-delimited string (e.g., "Use case 1. Use case 2"), which is split into an array for the frontend form and joined back when submitting. Additionally, the PR includes an unrelated fix to the onboarding header's userName construction logic.
Key Changes
- Updated
use_casefield type fromstringtostring[]in form values - Implemented array-based selection logic with proper split/join for backend compatibility
- Enhanced validation to ensure at least one option is selected
- Updated UI text from "Choose one" to "Choose one or more"
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
| apps/web/core/components/onboarding/steps/usecase/root.tsx | Converted use case field to array type, added split/join logic for backend string format, implemented multi-select toggle behavior |
| apps/web/core/components/onboarding/steps/profile/root.tsx | Updated TProfileSetupFormValues type definition to change use_case from string to string[] |
| apps/web/core/components/onboarding/profile-setup.tsx | Updated type definition, default values, split/join logic, validation rules, and multi-select UI for the combined onboarding flow |
| apps/web/core/components/onboarding/header.tsx | Fixed userName construction to properly handle missing user fields (unrelated to main PR purpose) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
sriramveeraghanta
deleted the
chore-multi-select-use-case-onboarding-and-refactoring
branch
Summary
Converts the use case selection in the onboarding flow from single-select to multi-select, allowing users to choose multiple use cases that describe how they plan to use Plane.
Type of Change
Summary by CodeRabbit
New Features
Refactor
✏️ Tip: You can customize this high-level summary in your review settings.