Feat: new onboarding card for API key visibility #2404
Conversation
ConsoleProject ID: Sites (2)
Note Cursor pagination performs better than offset pagination when loading further pages. |
WalkthroughReplaces the onboarding “Or connect” block with a Create API key card using new image assets ( Suggested reviewers
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
⏰ 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)
🔇 Additional comments (3)
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 |
- Show copy buttons in API key creation notification - Replace regional endpoint references with API endpoint
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/lib/components/apiEndpoint.svelte(1 hunks)src/lib/components/id.svelte(1 hunks)src/lib/components/index.ts(1 hunks)src/routes/(console)/project-[region]-[project]/overview/(components)/create.svelte(2 hunks)src/routes/(console)/project-[region]-[project]/overview/api-keys/[key]/header.svelte(2 hunks)src/routes/(console)/project-[region]-[project]/overview/header.svelte(2 hunks)
⏰ 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: e2e
- GitHub Check: build
🔇 Additional comments (5)
src/lib/components/id.svelte (1)
56-61: Prop extension looks correct.Thanks for threading the new
copyTextprop through to<Copy>. This keeps the Id component flexible without breaking existing call sites.src/lib/components/index.ts (1)
85-86: Good addition.Exporting
ApiEndpointfrom the barrel keeps the public surface consistent with the rest of the components.src/lib/components/apiEndpoint.svelte (1)
8-15: LGTM.Wrapping the endpoint in the shared
<Copy>+<Tag>treatment keeps the UI aligned with the other copy affordances.src/routes/(console)/project-[region]-[project]/overview/(components)/create.svelte (1)
47-59: Nice UX touch.Including clipboard actions right in the success toast is a great improvement.
src/routes/(console)/project-[region]-[project]/overview/header.svelte (1)
31-33: Copy affordance fits well.Passing
copyTextthrough to<Id>and reusing the newApiEndpointkeeps the header consistent with the API key view.
src/routes/(console)/project-[region]-[project]/overview/api-keys/[key]/header.svelte
Show resolved
Hide resolved
…eys/[key]/header.svelte Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
src/routes/(console)/project-[region]-[project]/overview/header.svelte (1)
34-48: Consider extracting inline styles to CSS classes.Multiple inline styles are applied to the image and text span. Extracting these to CSS classes would improve maintainability and readability.
Example refactor:
{#if $projectRegion?.flag} <Tag size="xs" variant="code"> <img src={getFlagUrl($projectRegion.flag)} alt={$projectRegion.name} slot="start" class="region-flag" /> <span class="region-name"> {$projectRegion.name} </span> </Tag> {/if}Add to the
<style>section:.region-flag { width: 16px; height: 12px; } .region-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }src/routes/(console)/project-[region]-[project]/overview/onboard.svelte (2)
29-30: Consider using consistent image formats.The light theme image uses
.jpgwhile the dark theme uses.png. For consistency and potentially better optimization, consider converting both to the same format (preferably.pngfor transparency support or.webpfor better compression).
702-719: Consider text readability on smaller screens.The
background-position: right centercombined with content positioned atflex-end(bottom) works well for larger screens. However, verify that the background image doesn't obscure the text on smaller viewports or when the card width is constrained.The overall CSS structure is solid, using consistent design tokens and responsive breakpoints.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
src/routes/(console)/project-[region]-[project]/overview/assets/platform-sdk-dark.pngis excluded by!**/*.png
📒 Files selected for processing (3)
src/routes/(console)/project-[region]-[project]/overview/api-keys/[key]/header.svelte(2 hunks)src/routes/(console)/project-[region]-[project]/overview/header.svelte(2 hunks)src/routes/(console)/project-[region]-[project]/overview/onboard.svelte(5 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/routes/(console)/project-[region]-[project]/overview/api-keys/[key]/header.svelte
⏰ 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: build
- GitHub Check: e2e
🔇 Additional comments (7)
src/routes/(console)/project-[region]-[project]/overview/header.svelte (3)
3-3: LGTM!The new imports (
ApiEndpoint,Tag, andgetFlagUrl) are all properly utilized in the component.Also applies to: 9-9, 13-13
32-32: LGTM!The
copyTextprop enhances the user experience by providing clear copy action feedback.
33-33: LGTM!The
ApiEndpointcomponent is correctly integrated into the header layout.src/routes/(console)/project-[region]-[project]/overview/onboard.svelte (4)
17-17: LGTM!The import simplification correctly removes unused icon imports while retaining
IconArrowRight, which is used throughout the component.
102-104: LGTM!The explicit responsive direction prop is consistent with the layout pattern used throughout the component and ensures proper stacking on small viewports.
344-369: Verify the card padding choice.This card uses
padding="none"while other platform cards usepadding="s". This appears intentional since the background image needs to fill the entire card, but please confirm this is the desired design.The overall implementation is well-structured with proper theme-aware image handling and analytics tracking.
342-342: CSS classes confirmed—with-separatorsis defined in src/routes/+layout.svelte andeyebrow-heading-3is part of the global design system.
src/routes/(console)/project-[region]-[project]/overview/header.svelte
Outdated
Show resolved
Hide resolved
…r.svelte Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/lib/components/copy.svelte (1)
60-60: Consider making maxWidth configurable.The hardcoded
maxWidth="500px"limits flexibility for different tooltip content lengths across various use cases. While acceptable given the TODO comment on line 53 suggesting this component's removal, consider exposingmaxWidthas an optional prop if this component will remain in use longer than anticipated.src/lib/components/regionEndpoint.svelte (1)
24-32: Minor: Redundant optional chaining.The optional chaining
region?.nameon line 29 is unnecessary since it's already inside the{#if region}block which ensuresregionis truthy. While harmless, simplifying toregion.nameimproves clarity.Apply this diff to remove redundant optional chaining:
- <img class="region-flag" src={flagSrc} alt={region?.name} /> + <img class="region-flag" src={flagSrc} alt={region.name} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/lib/components/copy.svelte(1 hunks)src/lib/components/regionEndpoint.svelte(2 hunks)src/routes/(console)/project-[region]-[project]/overview/api-keys/[key]/header.svelte(2 hunks)src/routes/(console)/project-[region]-[project]/overview/header.svelte(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/routes/(console)/project-[region]-[project]/overview/api-keys/[key]/header.svelte
- src/routes/(console)/project-[region]-[project]/overview/header.svelte
🔇 Additional comments (1)
src/lib/components/regionEndpoint.svelte (1)
4-5: LGTM!The new imports align with the refactored UI components used in the markup.
| <style> | ||
| .endpoint-label { | ||
| white-space: nowrap; | ||
| overflow: hidden; | ||
| word-break: break-all; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Fix CSS inconsistencies for better text overflow handling.
The .endpoint-label styles have two issues:
word-break: break-allhas no effect becausewhite-space: nowrapprevents line breaking entirely.- Missing
text-overflow: ellipsismeans truncated text will be cut off without visual indication (no "..." shown).
Apply this diff to improve text overflow handling:
.endpoint-label {
white-space: nowrap;
overflow: hidden;
- word-break: break-all;
+ text-overflow: ellipsis;
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <style> | |
| .endpoint-label { | |
| white-space: nowrap; | |
| overflow: hidden; | |
| word-break: break-all; | |
| } | |
| <style> | |
| .endpoint-label { | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| } | |
| </style> |
🤖 Prompt for AI Agents
In src/lib/components/regionEndpoint.svelte around lines 35–40, update the
.endpoint-label CSS so text truncation works correctly: remove the ineffective
word-break: break-all; keep white-space: nowrap and overflow: hidden, add
text-overflow: ellipsis, and ensure the element has a display that supports
ellipsis (e.g. display: block or display: inline-block). This will produce the
"..." when the text is truncated and avoid contradictory rules.
1 participant
What does this PR do?
(Provide a description of what this PR does.)
Test Plan
Related PRs and Issues
(If this PR is related to any other PR or resolves any issue or related to any issue link all related PR and issues here.)
Have you read the Contributing Guidelines on issues?
yes
Summary by CodeRabbit
New Features
Style