Files
supabase/apps/studio/components/interfaces/Support/SupportAccessToggle.tsx
Monica Khoury a87387b56e feat: show "Allow support access to your project" toggle for all support categories (#42254)
Previously, the “Allow support access to your project” toggle was only
shown for specific issue categories in our support form. This change
makes the toggle available for all categories.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Bug Fixes**
* Support access toggle and submission now suppress support access for
Account Deletion, Sales Enquiry, and Refund categories.
* **Refactor**
* Reworked category gating so UI visibility and submitted payload
consistently respect the disabled-category list.
* **UI**
* Category list updated—"Others" removed and category options adjusted
so all available options are shown.

<sub>✏️ Tip: You can customize this high-level summary in your review
settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-01-28 18:15:41 +00:00

102 lines
3.8 KiB
TypeScript

// End of third-party imports
import { SupportCategories } from '@supabase/shared-types/out/constants'
import { ChevronRight } from 'lucide-react'
import Link from 'next/link'
import type { UseFormReturn } from 'react-hook-form'
import {
Badge,
CollapsibleContent_Shadcn_,
CollapsibleTrigger_Shadcn_,
Collapsible_Shadcn_,
FormField_Shadcn_,
Switch,
} from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import type { ExtendedSupportCategories } from './Support.constants'
import type { SupportFormValues } from './SupportForm.schema'
export const DISABLE_SUPPORT_ACCESS_CATEGORIES: ExtendedSupportCategories[] = [
SupportCategories.ACCOUNT_DELETION,
SupportCategories.SALES_ENQUIRY,
SupportCategories.REFUND,
]
interface SupportAccessToggleProps {
form: UseFormReturn<SupportFormValues>
}
export function SupportAccessToggle({ form }: SupportAccessToggleProps) {
return (
<FormField_Shadcn_
name="allowSupportAccess"
control={form.control}
render={({ field }) => {
return (
<FormItemLayout
hideMessage
name="allowSupportAccess"
className="px-6"
layout="flex"
label={
<div className="flex items-center gap-x-2">
<span className="text-foreground">Allow support access to your project</span>
<Badge className="bg-opacity-100">Recommended</Badge>
</div>
}
description={
<div className="flex flex-col">
<span className="text-foreground-light">
Human support and AI diagnostic access.
</span>
<Collapsible_Shadcn_ className="mt-2">
<CollapsibleTrigger_Shadcn_
className={
'group flex items-center gap-x-1 group-data-[state=open]:text-foreground hover:text-foreground transition'
}
>
<ChevronRight
size={14}
className="transition-all group-data-[state=open]:rotate-90 text-foreground-muted -ml-1"
/>
<span className="text-sm">More information</span>
</CollapsibleTrigger_Shadcn_>
<CollapsibleContent_Shadcn_ className="text-sm text-foreground-light mt-2 space-y-2">
<p>
By enabling this, you grant permission for our support team to access your
project temporarily and, if applicable, to use AI tools to assist in
diagnosing and resolving issues. This access may involve analyzing database
configurations, query performance, and other relevant data to expedite
troubleshooting and enhance support accuracy.
</p>
<p>
We are committed to maintaining strict data privacy and security standards in
all support activities.{' '}
<Link
href="https://supabase.com/privacy"
target="_blank"
rel="noreferrer"
className="text-foreground-light underline hover:text-foreground transition"
>
Privacy Policy
</Link>
</p>
</CollapsibleContent_Shadcn_>
</Collapsible_Shadcn_>
</div>
}
>
<Switch
size="large"
id="allowSupportAccess"
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormItemLayout>
)
}}
/>
)
}