improvement: Confirm remove domain dialog

[ameer2468]

This PR:

• Shows a info message for local development that custom domains don't work.
• Confirmation dialog upon removing custom domain.
• Tooltip when hovering the badge + making the badge clickable to remove domain.

Summary by CodeRabbit

• New Features

  • Added a dedicated confirmation dialog when removing a custom domain, with clear messaging and icon.
  • Enabled clicking verified domain chips (with tooltip) to open the confirmation dialog.
  • Added a banner indicating custom domains aren’t available in development mode.

• Style

  • Updated the confirmation button’s visual style to use an outline variant for improved clarity.

• UX Improvements

  • Streamlined the removal flow with consistent dialogs and preserved loading/toast feedback.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

Updates ConfirmationDialog prop type to replace "secondary" with "outline". Refactors CustomDomain removal to use a ConfirmationDialog instead of window.confirm, adds dialog state management, tooltips, icons, and integrates loading/cleanup, while preserving subscription gating and success/error toasts with refresh.

Changes

Cohort / File(s)	Summary
ConfirmationDialog prop update apps/web/app/(org)/dashboard/_components/ConfirmationDialog.tsx	Changes ConfirmationDialogProps.confirmVariant union: replace "secondary" with "outline"; default remains "dark"; no control-flow changes.
CustomDomain removal flow refactor apps/web/app/(org)/dashboard/settings/organization/components/CustomDomain.tsx	Replaces browser confirm with ConfirmationDialog, adds confirmOpen state, Tooltip wrappers, icon, dynamic dialog content; onConfirm calls handleRemoveDomain; maintains subscription checks, toasts, refresh; ensures dialog state reset.

Sequence Diagram(s)

sequenceDiagram
  participant U as User
  participant CD as CustomDomain component
  participant D as ConfirmationDialog
  participant S as Subscription/Env Checks
  participant API as Remove Domain API
  participant UI as Toast/Router

  U->>CD: Click Remove (verified domain)
  CD->>D: Open confirmation dialog
  D-->>U: Show dialog (icon + description)
  U->>D: Confirm
  D->>CD: onConfirm
  CD->>S: Validate subscribed / not dev
  alt Allowed
    CD->>API: removeDomain(orgCustomDomain)
    API-->>CD: Success/Failure
    alt Success
      CD->>UI: Show success toast + refresh
    else Failure
      CD->>UI: Show error toast
    end
  else Blocked
    CD->>UI: Show upgrade/modal notice
  end
  CD->>D: Close dialog (reset state)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~18 minutes

Poem

A rabbit taps the confirm key, hop!
No more window prompts that pop.
A globe now gleams, the dialog sings,
“Proceed to snip those domain strings?”
Click, toast, refresh—so neat, so tight—
I thump my paws: shipped just right. 🐇✨

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ccd7fbe and f4e9bdb.

📒 Files selected for processing (2)

• apps/web/app/(org)/dashboard/_components/ConfirmationDialog.tsx (1 hunks)
• apps/web/app/(org)/dashboard/settings/organization/components/CustomDomain.tsx (7 hunks)

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch confirm-remove-domain

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Explain this complex logic.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai explain this code block.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and explain its main purpose.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
• @coderabbitai generate unit tests to generate unit tests for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.