fix: tooltips across the console and webhooks flow#2944
fix: tooltips across the console and webhooks flow#2944HarshMN2345 wants to merge 1 commit intomainfrom
Conversation
WalkthroughThis PR standardizes tooltip styling across the console UI by introducing three reusable CSS constants in a new helper file, then applying them to 13 pages and components to unify tooltip width constraints and text wrapping behavior. It also adds a helper text property to the InputURL component, updates webhook creation error handling from throwing to notification-based, and adds descriptive helper text for the webhook POST URL field. Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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 |
Greptile SummaryThis PR has two related goals: (1) centralise tooltip styling across the console into a small set of shared constants (
Confidence Score: 5/5Safe to merge — all changes are UI/tooltip styling refactors or minor bug fixes with no data-integrity risk. The only open finding is a P2 style inconsistency in createRecordModal.svelte where the TTL tooltip omits the BODY_TOOLTIP_WRAPPER_STYLE_PRELINE constant. All other changes are clean refactors using the new shared constants, and the webhook error-handling fix is an unambiguous improvement. src/routes/(console)/organization-[organization]/domains/domain-[domain]/createRecordModal.svelte — TTL tooltip still uses raw inline style Important Files Changed
Reviews (1): Last reviewed commit: "fix: tooltips across the console and web..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| <Tooltip slot="info"> | ||
| <Icon icon={IconInfo} size="s" /> | ||
| <span slot="tooltip"> | ||
| <div style="white-space: pre-line;" slot="tooltip"> |
There was a problem hiding this comment.
The TTL tooltip still uses a raw inline style string rather than the new BODY_TOOLTIP_WRAPPER_STYLE_PRELINE constant introduced in this PR. The inline style only sets white-space: pre-line, while the constant also includes min-width: 0, max-width: 100%, and overflow-wrap: break-word. The missing overflow-wrap property means long unbreakable words could overflow the tooltip on narrow viewports.
| <div style="white-space: pre-line;" slot="tooltip"> | |
| <div style={BODY_TOOLTIP_WRAPPER_STYLE_PRELINE} slot="tooltip"> |
BODY_TOOLTIP_WRAPPER_STYLE_PRELINE would need to be imported from $lib/helpers/tooltipContent in the <script> block as well.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
src/routes/(console)/organization-[organization]/domains/domain-[domain]/createRecordModal.svelte (1)
114-117: Prefer shared pre-line tooltip style constant instead of inline style literal.This keeps tooltip formatting consistent with the rest of the PR and avoids style string duplication.
♻️ Proposed refactor
import { createRecord } from '$lib/helpers/domains'; +import { BODY_TOOLTIP_WRAPPER_STYLE_PRELINE } from '$lib/helpers/tooltipContent'; import { showPriority } from './table.svelte'; @@ - <div style="white-space: pre-line;" slot="tooltip"> + <div style={BODY_TOOLTIP_WRAPPER_STYLE_PRELINE} slot="tooltip"> TTL defines how long DNS information is cached. Lower values update faster; higher values reduce server load. </div>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/routes/`(console)/organization-[organization]/domains/domain-[domain]/createRecordModal.svelte around lines 114 - 117, The tooltip div in createRecordModal.svelte uses an inline style literal ("white-space: pre-line;") which duplicates formatting; replace this inline style with the shared tooltip pre-line style by importing the shared constant or applying the shared CSS class used across the project (e.g., PRE_LINE_TOOLTIP_STYLE or a common TooltipPreLine class) and update the div with slot="tooltip" to use that import/class instead of the inline style to keep formatting consistent.src/routes/(console)/project-[region]-[project]/settings/webhooks/create/+page.svelte (1)
52-57: Add a regression test for the non-throwing error path.Given this changes control flow, a test should assert that failed create shows an error notification and does not navigate.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/routes/`(console)/project-[region]-[project]/settings/webhooks/create/+page.svelte around lines 52 - 57, A regression test is missing for the non-throwing error path introduced in the webhook creation flow: add a test that simulates the create call failing without throwing and asserts that addNotification is called with an error message and that navigation does not occur; locate the submit handler in +page.svelte (the code that calls addNotification and trackError with Submit.WebhookCreate) and mock the create API to return a failure response, then verify addNotification(...) was invoked and the router/navigation function was not called and trackError was invoked with Submit.WebhookCreate.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In
`@src/routes/`(console)/organization-[organization]/domains/domain-[domain]/createRecordModal.svelte:
- Around line 114-117: The tooltip div in createRecordModal.svelte uses an
inline style literal ("white-space: pre-line;") which duplicates formatting;
replace this inline style with the shared tooltip pre-line style by importing
the shared constant or applying the shared CSS class used across the project
(e.g., PRE_LINE_TOOLTIP_STYLE or a common TooltipPreLine class) and update the
div with slot="tooltip" to use that import/class instead of the inline style to
keep formatting consistent.
In
`@src/routes/`(console)/project-[region]-[project]/settings/webhooks/create/+page.svelte:
- Around line 52-57: A regression test is missing for the non-throwing error
path introduced in the webhook creation flow: add a test that simulates the
create call failing without throwing and asserts that addNotification is called
with an error message and that navigation does not occur; locate the submit
handler in +page.svelte (the code that calls addNotification and trackError with
Submit.WebhookCreate) and mock the create API to return a failure response, then
verify addNotification(...) was invoked and the router/navigation function was
not called and trackError was invoked with Submit.WebhookCreate.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: fed92d19-c275-4f20-8b1a-f6f154c63b81
📒 Files selected for processing (17)
src/lib/elements/forms/inputURL.sveltesrc/lib/helpers/tooltipContent.tssrc/lib/layout/containerButton.sveltesrc/routes/(console)/account/organizations/+page.sveltesrc/routes/(console)/organization-[organization]/+page.sveltesrc/routes/(console)/organization-[organization]/domains/domain-[domain]/createRecordModal.sveltesrc/routes/(console)/organization-[organization]/header.sveltesrc/routes/(console)/organization-[organization]/members/+page.sveltesrc/routes/(console)/project-[region]-[project]/databases/+page.sveltesrc/routes/(console)/project-[region]-[project]/functions/+page.sveltesrc/routes/(console)/project-[region]-[project]/functions/function-[function]/executions/+page.sveltesrc/routes/(console)/project-[region]-[project]/overview/platforms/action.sveltesrc/routes/(console)/project-[region]-[project]/settings/webhooks/+page.sveltesrc/routes/(console)/project-[region]-[project]/settings/webhooks/create/+page.sveltesrc/routes/(console)/project-[region]-[project]/settings/webhooks/create/step1.sveltesrc/routes/(console)/project-[region]-[project]/sites/site-[site]/+page.sveltesrc/routes/(console)/project-[region]-[project]/storage/+page.svelte
1 participant
What does this PR do?
(Provide a description of what this PR does.)
Test Plan
(Write your test plan here. If you changed any code, please provide us with clear instructions on how you verified your changes work.)
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?
(Write your answer here.)
Summary by CodeRabbit
New Features
Improvements