mirror of
https://github.com/supabase/supabase.git
synced 2026-10-16 22:59:11 +03:00
CharisandJoshen Lim
f5ff10e195
* refactor: refactor support form Refactor support form to make it easier to maintain: - Split up large components into smaller components and hooks - Lift state up so we don't have to do complex child/parent state-syncing via useEffect - Use nuqs parsing for consistent serialization/deserialization of support form prefilled fields * test: support form Add comprehensive tests for support form * fix(support form): project and org empty state * Nit clean up * More clean up * cleannnn * fix(support form): allow case-insensitive category in url * clean(support form tests): remove unused param * fix(support form): incorrect logic for sending affected services in payload * clean(support form): use NO_ORG_MARKER and NO_PROJECT_MARKER instead of strings * fix(support form): don't show upgrade cta if already on enterprise --------- Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
101 lines
3.8 KiB
TypeScript
101 lines
3.8 KiB
TypeScript
import { ChevronRight } from 'lucide-react'
|
|
import Link from 'next/link'
|
|
import type { UseFormReturn } from 'react-hook-form'
|
|
// End of third-party imports
|
|
|
|
import { SupportCategories } from '@supabase/shared-types/out/constants'
|
|
import {
|
|
Badge,
|
|
Collapsible_Shadcn_,
|
|
CollapsibleContent_Shadcn_,
|
|
CollapsibleTrigger_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 SUPPORT_ACCESS_CATEGORIES: ExtendedSupportCategories[] = [
|
|
SupportCategories.DATABASE_UNRESPONSIVE,
|
|
SupportCategories.PERFORMANCE_ISSUES,
|
|
SupportCategories.PROBLEM,
|
|
]
|
|
|
|
interface SupportAccessToggleProps {
|
|
form: UseFormReturn<SupportFormValues>
|
|
}
|
|
|
|
export function SupportAccessToggle({ form }: SupportAccessToggleProps) {
|
|
return (
|
|
<FormField_Shadcn_
|
|
name="allowSupportAccess"
|
|
control={form.control}
|
|
render={({ field }) => {
|
|
return (
|
|
<FormItemLayout
|
|
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
|
|
strokeWidth={2}
|
|
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>
|
|
)
|
|
}}
|
|
/>
|
|
)
|
|
}
|