[WEB-5491] refactor: onboarding tour components

[prateekshourya29]

Description

Type of Change

• Code refactoring

---

Note

Refactors onboarding tour with stricter types and updated imports, tweaks welcome step UI, and makes the tour overlay scrollable.

• Onboarding Tour (CE):
  • Types: Rename Props to TOnboardingTourProps; narrow image from any to string; strongly type sidebar Icon as React.FC<ISvgIcons>.
  • UI Adjustments: Update welcome panel sizing, colors, and spacing (e.g., header height to h-64, text color to white, increased button margin).
• Home (Core):
  • Overlay: Add overflow-y-auto to tour backdrop for scrolling when content exceeds viewport.
  • Imports: Switch to @/plane-web/components/... for HomePeekOverviewsRoot and TourRoot.
  • Cleanup: Remove apps/web/core/components/onboarding/tour/index.ts barrel export.

^{Written by Cursor Bugbot for commit 1776445. This will update automatically on new commits. Configure here.}

Summary by CodeRabbit

• Bug Fixes

  • Enabled vertical scrolling for the onboarding tour when content exceeds the viewport.

• Style

  • Refined onboarding welcome step layout: adjusted container sizing, spacing, and color for improved visual consistency.

• Refactor

  • Tightened type safety and component interfaces across onboarding tour pieces.
  • Simplified public exports and updated component sourcing to a consolidated location.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[makeplane]

Linked to Plane Work Item(s)

• [WEB-5491] onboarding tour component refactor

This comment was auto-generated by Plane

[coderabbitai]

Note

Other AI code review bot(s) detected

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

Walkthrough

Refined onboarding tour typing and imports: exported a new TOnboardingTourProps, tightened TOUR_STEPS.image and sidebar Icon types, updated a TourRoot import path, added scrolling to the tour backdrop, and removed a re-export from the core tour index.

Changes

Cohort / File(s)	Summary
Onboarding tour root — props & UI apps/web/ce/components/onboarding/tour/root.tsx	Added exported TOnboardingTourProps replacing internal Props; updated TourRoot signature to use it; changed TOUR_STEPS.image type from any → string; adjusted welcome-step layout and styling (reduced container constraints, changed colors, increased top margin).
Sidebar type tightening apps/web/ce/components/onboarding/tour/sidebar.tsx	Imported ISvgIcons type and changed sidebarOptions Icon type from any → React.FC<ISvgIcons>.
Home component import & backdrop scrolling apps/web/core/components/home/root.tsx	Changed TourRoot import to @/plane-web/components/onboarding/tour/root; added overflow-y-auto to tour backdrop container.
Index export removal apps/web/core/components/onboarding/tour/index.ts	Removed export * from "./root"; (no longer re-exporting the root module).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Verify all usages of TOnboardingTourProps and the updated TourRoot import resolve correctly.
• Confirm TOUR_STEPS.image values are strings (or converted where necessary).
• Ensure all icons assigned to sidebarOptions conform to React.FC<ISvgIcons>.
• Check downstream consumers for breakage due to removal of the export * from "./root" re-export.

Poem

🐇 I hopped through types and tidied the trail,

any grew thin — now strings prevail.
Exports trimmed, imports re-sprung,
A little scroll, a cleaner tongue.
— from a rabbit who refactors with a smile ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title '[WEB-5491] refactor: onboarding tour components' clearly summarizes the main change, which is a refactoring of onboarding tour components as shown in the code changes.
Description check	✅ Passed	The PR description is substantially complete with a detailed explanation of changes, though Test Scenarios and References sections from the template are missing or incomplete.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ 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 refactor-onboarding-tour

---

📜 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 5686a42 and 1776445.

📒 Files selected for processing (1)

• apps/web/core/components/home/root.tsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• apps/web/core/components/home/root.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). (3)

• GitHub Check: Cursor Bugbot
• GitHub Check: Build and lint web apps
• GitHub Check: Analyze (javascript)

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[cursor]

This is the final PR Bugbot will review for you during this billing cycle

Your free Bugbot reviews will reset on December 20

Details

Your team is on the Bugbot Free tier. On this plan, Bugbot will review limited PRs each billing cycle for each member of your team.

To receive Bugbot reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.