mirror of
https://github.com/supabase/supabase.git
synced 2026-05-08 01:40:13 -04:00
Ali Waseem
43e437140b
## Summary - Adds an Enable/Disable dropdown action in each row of the custom OAuth providers list. - Disabling opens a confirmation modal that calls the existing update API with `enabled: false`; enabling is immediate (restorative, no confirmation). - Removes the hardcoded `enabled: true` from the edit sheet's update payload so editing a disabled provider no longer silently re-enables it. Closes [FE-3067](https://linear.app/supabase/issue/FE-3067/add-disable-button-for-custom-oauth-providers). ## Test plan - [x] Create a custom OAuth provider — it is enabled by default. - [x] Click the row menu → "Disable". Confirm in the modal. Row shows `Disabled` badge. - [x] Click the row menu → "Enable". Row immediately flips back to `Enabled`. - [x] Edit a disabled provider via the "Update" action, save. Verify it remains `Disabled` (no silent re-enable). - [x] Delete action still works. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit ## Release Notes * **New Features** * Added enable/disable toggle controls for individual custom OAuth providers in the provider list * Added confirmation dialog when disabling a provider to prevent accidental changes <!-- end of auto-generated comment: release notes by coderabbit.ai -->
72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
import type { CustomOAuthProvider } from '@supabase/auth-js'
|
|
import { useParams } from 'common'
|
|
import { toast } from 'sonner'
|
|
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
|
|
|
|
import { useProjectApiUrl } from '@/data/config/project-endpoint-query'
|
|
import { useOAuthCustomProviderUpdateMutation } from '@/data/oauth-custom-providers/oauth-custom-provider-update-mutation'
|
|
|
|
interface DisableCustomProviderModalProps {
|
|
visible: boolean
|
|
selectedProvider?: CustomOAuthProvider
|
|
onClose: () => void
|
|
}
|
|
|
|
export const DisableCustomProviderModal = ({
|
|
visible,
|
|
selectedProvider,
|
|
onClose,
|
|
}: DisableCustomProviderModalProps) => {
|
|
const { ref: projectRef } = useParams()
|
|
const { hostEndpoint: clientEndpoint } = useProjectApiUrl({ projectRef })
|
|
const { mutate, isPending } = useOAuthCustomProviderUpdateMutation({
|
|
onSuccess: () => {
|
|
toast.success('Custom provider disabled')
|
|
onClose()
|
|
},
|
|
})
|
|
|
|
const onConfirmDisable = () => {
|
|
mutate({
|
|
identifier: selectedProvider?.identifier,
|
|
projectRef,
|
|
clientEndpoint,
|
|
enabled: false,
|
|
})
|
|
}
|
|
|
|
return (
|
|
<ConfirmationModal
|
|
variant="warning"
|
|
size="medium"
|
|
loading={isPending}
|
|
visible={visible}
|
|
title={
|
|
<>
|
|
Confirm to disable custom provider{' '}
|
|
<code className="text-sm">{selectedProvider?.name}</code>
|
|
</>
|
|
}
|
|
confirmLabel="Confirm disable"
|
|
confirmLabelLoading="Disabling..."
|
|
onCancel={() => onClose()}
|
|
onConfirm={() => onConfirmDisable()}
|
|
alert={{
|
|
title: 'Users will not be able to sign in with this provider',
|
|
description:
|
|
'You can re-enable it at any time. Existing sessions are not affected, but new sign-ins will fail until the provider is re-enabled.',
|
|
}}
|
|
>
|
|
<p className="text-sm">Before disabling this custom provider, consider:</p>
|
|
<ul className="space-y-2 mt-2 text-sm text-foreground-light">
|
|
<li className="list-disc ml-6">
|
|
Users authenticating with this provider will be unable to sign in
|
|
</li>
|
|
<li className="list-disc ml-6">
|
|
Applications relying on this provider should be updated or paused
|
|
</li>
|
|
</ul>
|
|
</ConfirmationModal>
|
|
)
|
|
}
|