Skip to content

Refactor Limits page#296

Open
sarimrmalik wants to merge 15 commits intomainfrom
refactor/limits-page
Open

Refactor Limits page#296
sarimrmalik wants to merge 15 commits intomainfrom
refactor/limits-page

Conversation

@sarimrmalik
Copy link
Copy Markdown
Collaborator

@sarimrmalik sarimrmalik commented Apr 14, 2026

Ticket

  • Refactors the limits page into separate usage-limit and usage-alert sections, replacing the older card-based flow with simpler inline controls.
  • Adds dedicated forms and confirmation dialogs for setting, editing, and removing limits and alerts, improving focus behavior, cancel handling, and overall interaction clarity.
  • Cleans up the surrounding page structure and shared currency formatting so limit values are displayed and edited more consistently across the dashboard.

@vercel
Copy link
Copy Markdown

vercel bot commented Apr 14, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
web Ready Ready Preview, Comment Apr 14, 2026 6:50pm
web-juliett Ready Ready Preview, Comment Apr 14, 2026 6:50pm

Request Review

…VGs, improving accessibility and layout. Adjusted font size and line height for better visual consistency.
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 151d6883d8

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment on lines +42 to +44
value === null
? `Informative alert will be sent to ${email} when this threshold is reached`
: `Informative alert will be sent to ${email} when the $${currencyFormatter.format(value)} threshold is reached`
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Don’t describe alert delivery when no threshold is set

When value is null, there is no configured billing alert threshold, but this branch still tells users an alert will be sent when “this threshold” is reached. In that state no custom threshold exists, so the message is inaccurate and can make teams believe alerting is already configured; this should instead communicate that no alert is currently set.

Useful? React with 👍 / 👎.

Comment on lines +54 to +56
value === null
? 'All API requests are blocked after reaching this limit'
: `All API requests are blocked after reaching $${currencyFormatter.format(value)}`
Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Don’t claim traffic is blocked when no limit exists

The value === null branch says all API requests are blocked after reaching “this limit,” but a null limit means usage is currently uncapped. Showing enforcement copy in the unset state is misleading and can cause users to think production traffic is being capped when it is not.

Useful? React with 👍 / 👎.

…onent and replacing it with UsageLimitForm and UsageAlertForm components. Introduce a new RemoveUsageLimitDialog for handling limit removals. Update the limit-section to utilize the new forms and adjust the UsageLimits component accordingly. Enhance currency formatting utilities for better input handling.
…n component and replacing it with separate UsageLimitSection and UsageAlertSection components. Update imports in UsageLimits to reflect the new structure. Enhance currency formatting in UsageLimitForm and UsageAlertForm for improved consistency.
…lity. Introduce shouldShowCancel logic to determine when the cancel button should be displayed, ensuring a clearer user experience when editing alert and limit values.
Introduce a new SetUsageLimitDialog component to facilitate setting usage limits within the dashboard. This dialog includes confirmation and cancellation options, enhancing user interaction when managing API limits. Update UsageLimitForm to integrate the new dialog and streamline the limit-setting process, replacing the previous confirmation dialog implementation.
…r displaying currency values. Update setDraftValue to format currency correctly when editing values, enhancing user experience and consistency in currency formatting.
…teraction. Introduce controlled dialog state management and update button icons for consistency. Improve editing experience by focusing input fields when editing, and streamline the handling of alert and limit removals.
…solidate loading and limits rendering logic into a single conditional block, and adjust layout for better responsiveness by changing max-width. This enhances user experience during data fetching.
Introduce a ref to track component mount status, ensuring that the effect for focusing the input field only runs after the component has mounted. This improves the user experience by preventing unintended focus behavior during the initial render.
@sarimrmalik sarimrmalik changed the title [WIP] Refactor Limits page Refactor Limits page Apr 14, 2026
…ests

Introduce CurrencyInputSchema for validating positive whole USD amounts, along with utility functions sanitizeCurrencyInput and formatCurrencyValue. Implement unit tests for these utilities to ensure correct functionality, covering various input scenarios. Refactor UsageAlertForm and UsageLimitForm to utilize the new currency validation schema, enhancing user input handling and consistency in currency formatting.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant