refactor(ui): Add Architecture Builder with AWS component palette and UI cleanup#14
Conversation
Add component palette, AWS service names, and graph transfer to dashboard
- Add component palette with 21 AWS services for drag-and-drop architecture building - Add full AWS service name mapping (Rds → Amazon RDS, etc.) - Add 'Open in Dashboard' button in pipeline graph viewer with localStorage transfer - Remove prompt input and placeholder links from homepage - Simplify header/footer with only functional links - Add suppressHydrationWarning to fix browser extension errors
WalkthroughThis PR overhauls the application's interface from a prompt-input workflow to a pipeline-centric design. The dashboard layout shifts from a sidebar to a header-based structure with a dynamic component palette, introduces service-to-icon/color mappings for infrastructure nodes, adds localStorage persistence for graph state, and enables node creation via canvas clicks. Navigation and footer links are simplified to focus on core features. Changes
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Areas requiring extra attention:
Possibly related PRs
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
🐰 CodeRabbit Review ReminderThis PR will be automatically reviewed by CodeRabbit. Please ensure:
Maintainer approval is required after addressing CodeRabbit feedback. |
|
Hey there! 👋 I see this is the automated reminder to review this PR. I'm on it! I'll start reviewing the Architecture Builder changes, including:
Let me dive into the code and provide you with a comprehensive review! 🔍 ✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
ui/app/layout.jsx (1)
11-21: Be careful: globalsuppressHydrationWarningcan hide real hydration bugs
I get why you added it (extensions love to mutate the DOM), but putting it onhtml+bodymeans you won’t see legit mismatches your app causes. If possible, scope it to the smallest subtree that’s actually noisy.
🧹 Nitpick comments (5)
ui/components/viewers/GraphViewer.module.css (1)
58-104: Header action buttons: good structure; double-check contrast + focus states
The layout/classes are clean. Just make sure the “white gradient” dashboard button still has strong contrast on all themes and that keyboard focus is visible (outline/ring), not just hover.ui/components/viewers/GraphViewer.jsx (1)
17-35: Service-name mapping is helpful, but it’s duplicated elsewhere (easy to drift)
SinceSERVICE_NAME_MAPnow exists in multiple files, consider moving it to a shared module so you don’t fix a name in one place and forget the other.ui/app/dashboard/page.jsx (2)
48-170: Palette + mapping approach is solid, but you’ve now got duplicated maps across the app
Same note as GraphViewer: consider sharing these constants/helpers so the dashboard + viewer don’t slowly diverge.
311-320: Export is functional, but it drops a lot of graph fidelity
You only export edge{id, source, target}(and nodedatawithout nodestyle). If users expect “export then import gives me the same diagram,” you’ll want to include edge type/style/animated + node style/viewport.ui/components/Footer.jsx (1)
29-33: Consider extracting the GitHub URL to a constant.Hey! The footer simplification looks solid – using Next.js
Linkfor internal routes and a proper<a>tag for the external GitHub link with correct security attributes (rel="noopener noreferrer").For slightly better maintainability, you could extract the GitHub URL to a constant at the top of the file, especially if you reference this repo URL elsewhere in the codebase:
+const GITHUB_REPO_URL = "https://github.com/crypticsaiyan/infoundry"; export default function Footer() { const currentYear = new Date().getFullYear();Then use it in the link:
- <a href="https://github.com/crypticsaiyan/infoundry" target="_blank" rel="noopener noreferrer" className={styles.link}> + <a href={GITHUB_REPO_URL} target="_blank" rel="noopener noreferrer" className={styles.link}>But honestly, for just one reference, hardcoding it here is totally fine too!
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
ui/app/dashboard/page.jsx(4 hunks)ui/app/dashboard/page.module.css(5 hunks)ui/app/layout.jsx(2 hunks)ui/app/page.jsx(3 hunks)ui/app/page.module.css(2 hunks)ui/components/Footer.jsx(2 hunks)ui/components/Footer.module.css(1 hunks)ui/components/Header.jsx(0 hunks)ui/components/viewers/GraphViewer.jsx(5 hunks)ui/components/viewers/GraphViewer.module.css(1 hunks)
💤 Files with no reviewable changes (1)
- ui/components/Header.jsx
🔇 Additional comments (15)
ui/components/viewers/GraphViewer.module.css (1)
46-56: Typography tweaks look fine
The smaller stats read well and match the “header controls” vibe.ui/app/page.jsx (2)
4-4: Icon import update is fine
Swapping toZapfits the new pipeline CTA direction.
137-143: CTA buttons match the new “pipeline-first” flow
Linking primary →/pipelineand renaming secondary → “View Dashboard” is consistent and clearer.ui/app/page.module.css (2)
160-191: Pipeline CTA styling is clean and matches the new hero block
Button + hint spacing reads well.
300-313: Nice:ctaPrimaryinline-flex makes icon+text alignment “just work”
This is the right move for consistent button layout.ui/components/viewers/GraphViewer.jsx (1)
82-99: DisplayingfullNameis a solid UX upgrade
Just note: if upstream graph nodes ever includedata.type, you’ll get more accurate naming than relying on labels.ui/app/dashboard/page.module.css (1)
8-104: Header-first layout styles look consistent
Spacing/typography feels aligned with the rest of the app and the responsive wrap rules make sense.ui/app/dashboard/page.jsx (1)
221-254: localStorage load flow is good (and you clean up after yourself)
The try/catch + removeItem is the right pattern for “handoff” state.ui/components/Footer.jsx (1)
10-10: Nice! Container naming aligns with CSS refactor.The rename from
styles.toptostyles.contentis more semantic and matches the updated CSS module. Clean coordination between the component and styles.ui/components/Footer.module.css (6)
1-7: Footer base styles look clean!Using CSS custom properties (
var(--spacing-2xl),var(--color-bg-primary)) for theming is the right approach. Makes it easy to maintain consistent spacing and colors across your app.
14-20: Content layout is solid.The flexbox setup with
space-betweenand centered alignment creates a nice balanced footer layout. The rename to.contentis more semantic than.top– good call!
29-41: Love the logo hover effect!Adding the opacity transition on hover (lines 36, 39-41) is a subtle but nice touch for user interaction. The reduced font-weight (600 instead of 700) also gives it a more modern, less heavy feel. Clean work!
57-73: Links section styling is on point.The horizontal layout with proper spacing and hover states works well for your simplified 3-link footer. Font-weight 500 strikes a nice balance – not too bold, not too light.
82-82: Heads up: Copyright text is at the accessibility minimum.The copyright font-size of
0.75rem(12px) is technically at the minimum threshold recommended by WCAG. While it's acceptable for secondary footer content, some users might find it a bit small, especially on lower-resolution displays.If you want to be extra safe for accessibility, consider bumping it to
0.875rem(14px):.copyright { - font-size: 0.75rem; + font-size: 0.875rem; color: var(--color-text-muted); text-align: center; }But since this is copyright text (which is typically small in most footers), the current size is a reasonable choice if you're optimizing for design consistency.
87-103: Responsive design handles mobile nicely.The breakpoint at 640px switches to a centered column layout, which is perfect for mobile. The links get
flex-wrapand centered justification, so they'll stack naturally on smaller screens. This will look good on phones!
1 participant
Pull Request
Description
Major UI improvements including a new Architecture Builder with drag-and-drop component palette, full AWS service name mapping, and streamlined navigation.
Type of Change
Changes Made
suppressHydrationWarningto prevent browser extension errorsInfrastructure Changes (if applicable)
Testing
terraform validate) passesTest Evidence
Checklist
CodeRabbit Review
Screenshots (if applicable)
Additional Notes
This PR focuses on improving the user experience by:
This PR will be automatically reviewed by CodeRabbit 🐰
Summary by CodeRabbit
New Features
UI/UX Improvements
Bug Fixes
✏️ Tip: You can customize this high-level summary in your review settings.