feat: modified UI and welcome panel to match console design#2478
Merged
jigar-arc10 merged 6 commits intomainfrom Mar 6, 2026
Merged
feat: modified UI and welcome panel to match console design#2478jigar-arc10 merged 6 commits intomainfrom
jigar-arc10 merged 6 commits intomainfrom
Conversation
Contributor
📝 WalkthroughWalkthroughThe WelcomePanel was refactored from a static Card to a Collapsible container controlled by local state. Content is reorganized into a three-item list (Get Started, Explore Providers, Learn more) with icons, links, subtitles, and a header toggle button using the NavArrowDown icon. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ 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. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #2478 +/- ##
==========================================
- Coverage 55.01% 50.26% -4.75%
==========================================
Files 1025 1059 +34
Lines 23779 28298 +4519
Branches 5832 6286 +454
==========================================
+ Hits 13082 14224 +1142
- Misses 9323 13677 +4354
+ Partials 1374 397 -977
*This pull request uses carry forward flags. Click here to find out more. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In @apps/provider-console/src/components/home/WelcomePanel.tsx:
- Line 37: The text in the WelcomePanel component contains incorrect article
usage: change the string "Become a Akash Provider with simple and easy to follow
steps." to use the correct indefinite article "an" (i.e., "Become an Akash
Provider with simple and easy to follow steps.") by updating the span inside the
WelcomePanel component where that message is rendered.
- Line 48: The external Link elements in WelcomePanel.tsx that use
target="_blank" (the Link JSX at line with
href="https://console.akash.network/providers" and the other Link at the
mentioned second occurrence) need to include rel="noopener noreferrer"; update
those Link components to add rel="noopener noreferrer" to prevent reverse
tabnabbing and other security issues while preserving target="_blank".
🧹 Nitpick comments (2)
apps/provider-console/src/components/home/WelcomePanel.tsx (2)
16-20: Remove redundantonClickhandler.The
CollapsibleTriggerautomatically toggles the open state viaCollapsible'sonOpenChangeprop. The explicitonClickhandler is unnecessary and should be removed.♻️ Proposed fix
<CollapsibleTrigger asChild> - <Button size="icon" variant="ghost" className="!m-0 rounded-full" onClick={() => setExpanded(prev => !prev)}> + <Button size="icon" variant="ghost" className="!m-0 rounded-full"> <NavArrowDown fontSize="1rem" className={cn("transition-all duration-100", { ["rotate-180"]: expanded })} /> </Button> </CollapsibleTrigger>
55-62: Inconsistent spacing between list items.The first two list items use
space-x-4on the<li>, but the third usesml-4on the inner div. Consider using consistent spacing for maintainability.♻️ Proposed fix
- <li className="flex items-center"> + <li className="flex items-center space-x-4"> <Avatar className="h-12 w-12 rounded-md"> <AvatarFallback className="rounded-md"> <Learning /> </AvatarFallback> </Avatar> - <div className="ml-4 flex flex-col"> + <div className="flex flex-col">
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/provider-console/src/components/home/WelcomePanel.tsx
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursor/rules/general.mdc)
**/*.{ts,tsx,js}: Never use typeanyor cast to typeany. Always define the proper TypeScript types.
Never use deprecated methods from libraries.
Don't add unnecessary comments to the code.
Files:
apps/provider-console/src/components/home/WelcomePanel.tsx
🧠 Learnings (2)
📓 Common learnings
Learnt from: baktun14
Repo: akash-network/console PR: 1725
File: apps/api/src/utils/constants.ts:5-5
Timestamp: 2025-07-24T17:00:52.361Z
Learning: In the Akash Network Console project, when cross-cutting concerns or broader refactoring issues are identified during PR review, the preferred approach is to create a separate GitHub issue to track the work rather than expanding the scope of the current PR. This maintains focus and allows for proper planning of architectural improvements.
📚 Learning: 2025-07-29T15:14:53.419Z
Learnt from: baktun14
Repo: akash-network/console PR: 1750
File: apps/deploy-web/src/components/onboarding/steps/PaymentVerificationCard/PaymentVerificationCard.tsx:33-37
Timestamp: 2025-07-29T15:14:53.419Z
Learning: CardDescription from akashnetwork/ui/components renders as a <p> element, so any block-level content inside it should use <div> (not <p>) to avoid invalid HTML nesting.
Applied to files:
apps/provider-console/src/components/home/WelcomePanel.tsx
🧬 Code graph analysis (1)
apps/provider-console/src/components/home/WelcomePanel.tsx (2)
apps/provider-console/src/utils/styleUtils.ts (1)
cn(4-6)apps/provider-console/src/utils/urlUtils.ts (1)
UrlService(17-32)
⏰ 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). (2)
- GitHub Check: codecov/project/api
- GitHub Check: test-build
🔇 Additional comments (1)
apps/provider-console/src/components/home/WelcomePanel.tsx (1)
1-11: LGTM!Imports are well-organized and the initial state for the collapsible panel being expanded by default is a sensible UX choice.
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Fix all issues with AI agents
In @apps/provider-console/src/components/home/WelcomePanel.tsx:
- Around line 48-50: The external Link element that opens in a new tab (the JSX
Link with href="https://console.akash.network/providers" and target="_blank") is
missing rel="noopener noreferrer"; update that Link component to include
rel="noopener noreferrer" (e.g., add the rel prop on the same Link element) to
prevent reverse tabnabbing while keeping the existing href, target and className
intact.
- Around line 16-20: The onClick on the Button inside CollapsibleTrigger is
redundant and causes a double-toggle; remove the onClick={() => setExpanded(prev
=> !prev)} from the Button (inside CollapsibleTrigger) and rely on the parent
Collapsible's onOpenChange to update state via setExpanded; keep the expanded
state usage for NavArrowDown's rotation class and ensure CollapsibleTrigger,
Button, setExpanded, expanded, and NavArrowDown remain otherwise unchanged.
- Around line 55-68: The list item uses inconsistent spacing and misses a
security rel attribute: update the <li> element that contains
Avatar/AvatarFallback/Learning to use "flex items-center space-x-4" instead of
relying on the inner div's "ml-4", remove the "ml-4" class from the inner <div>
so spacing is consistent with other items, and add rel="noopener noreferrer" to
the Link component (which currently has target="_blank") to secure external
navigation.
📜 Review details
Configuration used: defaults
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/provider-console/src/components/home/WelcomePanel.tsx
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursor/rules/general.mdc)
**/*.{ts,tsx,js}: Never use typeanyor cast to typeany. Always define the proper TypeScript types.
Never use deprecated methods from libraries.
Don't add unnecessary comments to the code.
Files:
apps/provider-console/src/components/home/WelcomePanel.tsx
🧠 Learnings (3)
📓 Common learnings
Learnt from: baktun14
Repo: akash-network/console PR: 1725
File: apps/api/src/utils/constants.ts:5-5
Timestamp: 2025-07-24T17:00:52.361Z
Learning: In the Akash Network Console project, when cross-cutting concerns or broader refactoring issues are identified during PR review, the preferred approach is to create a separate GitHub issue to track the work rather than expanding the scope of the current PR. This maintains focus and allows for proper planning of architectural improvements.
📚 Learning: 2025-09-29T03:58:26.414Z
Learnt from: stalniy
Repo: akash-network/console PR: 1971
File: apps/deploy-web/src/components/home/YourAccount.tsx:234-239
Timestamp: 2025-09-29T03:58:26.414Z
Learning: In the Akash Network Console project, the UI components use CSS approach for disabling elements with aria-disabled="true" using "aria-[disabled='true']:pointer-events-none aria-[disabled='true']:opacity-50" classes, as seen in the button component. This pattern should be extended to links for consistency.
Applied to files:
apps/provider-console/src/components/home/WelcomePanel.tsx
📚 Learning: 2025-07-29T15:14:53.419Z
Learnt from: baktun14
Repo: akash-network/console PR: 1750
File: apps/deploy-web/src/components/onboarding/steps/PaymentVerificationCard/PaymentVerificationCard.tsx:33-37
Timestamp: 2025-07-29T15:14:53.419Z
Learning: CardDescription from akashnetwork/ui/components renders as a <p> element, so any block-level content inside it should use <div> (not <p>) to avoid invalid HTML nesting.
Applied to files:
apps/provider-console/src/components/home/WelcomePanel.tsx
🧬 Code graph analysis (1)
apps/provider-console/src/components/home/WelcomePanel.tsx (4)
packages/ui/components/button.tsx (1)
Button(46-46)apps/provider-console/src/utils/styleUtils.ts (1)
cn(4-6)packages/ui/components/card.tsx (2)
Card(37-37)CardContent(37-37)apps/provider-console/src/utils/urlUtils.ts (1)
UrlService(17-32)
⏰ 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). (2)
- GitHub Check: test-build
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (1)
apps/provider-console/src/components/home/WelcomePanel.tsx (1)
1-8: LGTM!Imports are properly organized and all appear to be utilized in the component.
The API no longer returns activeStats/pendingStats/availableStats as separate objects. Instead, stats are nested under a single `stats` object keyed by resource type (cpu, gpu, memory, storage). Also removes redundant onClick handler from WelcomePanel CollapsibleTrigger.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary by CodeRabbit
✏️ Tip: You can customize this high-level summary in your review settings.