Files
Joshen Lim 90d3b56db0 Joshen/fe 2621 show custom domain on dashboard and connect modal (#43233)
## Context

Main fix is to adjust the new home page + connect dialog (and connect
sheet) to render the project's custom domain if available

<img width="471" height="255" alt="image"
src="https://github.com/user-attachments/assets/3a208b2e-bdeb-43f5-a2e7-3495881dbaaa"
/>
<img width="1065" height="233" alt="image"
src="https://github.com/user-attachments/assets/2a7b8f81-8c0b-4803-bf0a-fc16a2f1e0e1"
/>

## Changes involved

- Created a `useProjectApiUrl` hook that will return the API URL
depending if custom domains is available, otherwise default to default
project API URL
- Refactored all the other places that were manually deriving the
project's endpoint
  - Storage Explorer -> copy URL
  - Edge Functions
  - Integrations -> Data API + API Docs
  - Auth Providers -> Callback URL
- Also updated the copy CTA for the addons page
  - Instead of just "Change xxx", make it a bit more actionable
  - For add ons with binary states (Custom domains, IPv4)
    - If not enabled yet, "Enable xxx", otherwise "Toggle xxx"
  - For PITR
- If not enabled yet, "Enable PITR", otherwise "Change recovery
duration"
  - Also added "Edit custom domain" CTA if enabled
<img width="1144" height="518" alt="image"
src="https://github.com/user-attachments/assets/4f152ea5-0cc7-412c-95e8-ad5bb37c19c3"
/>


## To test
- [ ] Verify that for a project with custom domain set up, all the
affected UI mentioned in the above section look correct
2026-03-03 11:37:08 +08:00

63 lines
1.9 KiB
TypeScript

import type { OAuthClient } from '@supabase/supabase-js'
import { useParams } from 'common'
import { useProjectApiUrl } from 'data/config/project-endpoint-query'
import type { OAuthServerAppDeleteVariables } from 'data/oauth-server-apps/oauth-server-app-delete-mutation'
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
interface DeleteOAuthAppModalProps {
visible: boolean
selectedApp?: OAuthClient
setVisible: (value: string | null) => void
onDelete: (params: OAuthServerAppDeleteVariables) => void
isLoading: boolean
}
export const DeleteOAuthAppModal = ({
visible,
selectedApp,
setVisible,
onDelete,
isLoading,
}: DeleteOAuthAppModalProps) => {
const { ref: projectRef } = useParams()
const { hostEndpoint: clientEndpoint } = useProjectApiUrl({ projectRef })
const onConfirmDeleteApp = () => {
onDelete({
projectRef,
clientEndpoint,
clientId: selectedApp?.client_id,
})
}
return (
<ConfirmationModal
variant={'destructive'}
size="medium"
loading={isLoading}
visible={visible}
title={
<>
Confirm to delete OAuth app{' '}
<code className="text-code-inline">{selectedApp?.client_name}</code>
</>
}
confirmLabel="Confirm delete"
confirmLabelLoading="Deleting..."
onCancel={() => setVisible(null)}
onConfirm={() => onConfirmDeleteApp()}
alert={{
title: 'This action cannot be undone',
description: 'You will need to re-create the OAuth app if you want to revert the deletion.',
}}
>
<p className="text-sm">Before deleting this OAuth app, consider:</p>
<ul className="space-y-2 mt-2 text-sm text-foreground-light">
<li className="list-disc ml-6">Any applications using this OAuth app will lose access</li>
<li className="list-disc ml-6">This OAuth app is no longer in use by any applications</li>
</ul>
</ConfirmationModal>
)
}