[WEB-4363]: Analytics tab improvements#7248
Conversation
fix: padding in tabs
…lytics-tab-improvements
WalkthroughThis update refactors analytics tab navigation by shifting tab state from URL query parameters to route parameters. The layout component is renamed for clarity, and a permanent redirect is added to route analytics root paths to the overview tab. Tab navigation logic and styling receive targeted adjustments. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Browser
participant NextJS_Router
participant AnalyticsPage
User->>Browser: Navigates to /[workspaceSlug]/analytics
Browser->>NextJS_Router: Request /[workspaceSlug]/analytics
NextJS_Router-->>Browser: Redirect to /[workspaceSlug]/analytics/overview
Browser->>NextJS_Router: Request /[workspaceSlug]/analytics/overview
NextJS_Router->>AnalyticsPage: Render with tabId = "overview"
AnalyticsPage->>Browser: Render tab content for "overview"
User->>AnalyticsPage: Clicks another tab
AnalyticsPage->>NextJS_Router: Push /[workspaceSlug]/analytics/[newTabId]
NextJS_Router->>AnalyticsPage: Render with tabId = [newTabId]
AnalyticsPage->>Browser: Render tab content for [newTabId]
Suggested labels
Suggested reviewers
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Pull Request Linked with Plane Work Items Comment Automatically Generated by Plane |
![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
🧹 Nitpick comments (1)
web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx (1)
5-5: Remove unused useSearchParams import.Since the component now uses route parameters instead of search parameters, the
useSearchParamsimport is no longer needed.-import { useRouter, useSearchParams } from "next/navigation"; +import { useRouter } from "next/navigation";
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/layout.tsx(1 hunks)web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx(2 hunks)web/next.config.js(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Analyze (python)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (6)
web/next.config.js (1)
56-60: LGTM! Redirect configuration supports the new route-based tab navigation.The redirect rule correctly routes analytics root paths to the overview tab, aligning with the shift from query parameters to route parameters for analytics tab navigation.
web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/layout.tsx (1)
6-6: Good semantic improvement with the component rename.Renaming from
WorkspaceAnalyticsLayouttoWorkspaceAnalyticsTabLayoutbetter reflects the component's role in the new tab-focused routing structure.web/app/(all)/[workspaceSlug]/(projects)/analytics/[tabId]/page.tsx (4)
19-28: Well-structured props typing for the new route-based navigation.The Props interface correctly types the tabId parameter from Next.js app router params, and the destructuring logic cleanly extracts the tabId for use in the component.
64-64: Router navigation properly updated for route-based tabs.The navigation correctly builds the route path using workspace slug and tab key, replacing the previous query parameter approach.
68-70: Memoization and default tab logic correctly updated.The dependencies now include
currentWorkspace?.slugsince navigation depends on it, and the defaultTab logic properly uses the tabId from route parameters.
85-87: Good styling refinements for the tab components.The updates to
tabListClassName, addition oftabClassName, and padding changes intabPanelClassNameimprove the visual presentation of the analytics tabs.
4 participants
Description
Type of Change
Screenshots and Media (if applicable)
Media