Files
supabase/apps/studio/components/interfaces/Support/SupportAccessToggle.tsx
Ali Waseem 6d7c3361dc fix(studio): hide support access toggle when no project is selected (#48206)
## Summary
Support access is granted per-project, but the "Allow support access"
toggle stayed visible and submittable even when "No specific project"
was selected. This hides the toggle and forces
`allowSupportAccess`/`allow_support_access` to `false` in that case,
across the standalone support form, sidebar form, and link-ticket form.

Addresses
[FE-3979](https://linear.app/supabase/issue/FE-3979/support-form-allows-support-access-without-a-project-selected).

## Test plan
- [x] Added/updated unit tests in `SupportFormPage.test.tsx` covering
toggle visibility and submitted payload when no project is selected
- [x] `pnpm vitest run components/interfaces/Support` passes (48 tests)
- [x] Typecheck and lint pass on changed files

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

## Summary by CodeRabbit

* **Bug Fixes**
* Support access is now offered only when a valid project and eligible
support category are selected.
* Support access is automatically disabled when no specific project is
selected.
* Form submissions now prevent unsupported support-access requests from
being enabled.
* **Tests**
* Added coverage for project clearing and scenarios without available
projects or organizations.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-07-22 11:49:03 -06:00

90 lines
3.4 KiB
TypeScript

// End of third-party imports
import { ChevronRight } from 'lucide-react'
import Link from 'next/link'
import type { UseFormReturn } from 'react-hook-form'
import { Badge, Collapsible, CollapsibleContent, CollapsibleTrigger, FormField, Switch } from 'ui'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
import type { SupportFormValues } from './SupportForm.schema'
interface SupportAccessToggleProps {
form: UseFormReturn<SupportFormValues>
align?: 'left' | 'right'
className?: string
}
export function SupportAccessToggle({ form, align = 'left', className }: SupportAccessToggleProps) {
return (
<FormField
name="allowSupportAccess"
control={form.control}
render={({ field }) => {
return (
<FormItemLayout
hideMessage
name="allowSupportAccess"
className={className}
layout="flex"
align={align}
label={
<div className="flex items-center gap-x-2">
<span className="text-foreground">Allow support access to your project</span>
<Badge>Recommended</Badge>
</div>
}
description={
<div className="flex flex-col">
<span className="text-foreground-light">
Human support and AI diagnostic access.
</span>
<Collapsible className="mt-2">
<CollapsibleTrigger
className={
'group flex items-center gap-x-1 group-data-open:text-foreground hover:text-foreground transition'
}
>
<ChevronRight
size={14}
className="transition-all group-data-open:rotate-90 text-foreground-muted -ml-1"
/>
<span className="text-sm">More information</span>
</CollapsibleTrigger>
<CollapsibleContent 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>
</Collapsible>
</div>
}
>
<Switch
size="large"
id="allowSupportAccess"
checked={field.value}
onCheckedChange={field.onChange}
/>
</FormItemLayout>
)
}}
/>
)
}